Verschuivende floating div's

[Zeezicht]

Als vervolg op een vorig topic: Verschuivende floating div's
Hier nog even een vraagje, want het wil nog niet helemaal lukken. Op deze pagina staan 3 "kolommen" dmv 3 div's. De 3 kolommen floaten naast elkaar. Maar nu is het zo dat de 3e soms naar beneden verdwijnt. Dit terwijl de 3 div's ruimte genoeg hebben naast elkaar (zelfs iets meer dan nodig).

Weet iemand hoe ik dit kan voorkomen? Ik wil liever geen tabel gebruiken om het voor elkaar te krijgen.

PS. layout is niet mijn idee.

[ Voor 5% gewijzigd door Zeezicht op 17-10-2005 21:50 . Reden: De source code wat geschoond ]

[Yoozer]

* Yoozer doet view source



Iemand heeft hier absoluut niet begrepen waar divjes voor dienen... ik zou er eens een hele hoop overbodige zooi uit gaan snoeien, uit de center div in ieder geval. <p>'s van maken zou misschien al een hoop helpen, en alle styles in een stylesheet smijten ipv deze inline-meuk. Als je dat al kunt 'opruimen' is het probleem misschien makkelijker te spotten.

[ Voor 32% gewijzigd door Yoozer op 17-10-2005 21:11 ]

[Zeezicht]

Mmmm ik zie wat je bedoelt... maar dat komt vooral door een HTML editor die de teksten in een DB zet.
De rest van de CSS zit vooral in een stylesheet en niet inline.

[T-MOB]

Ik krijg het probleem niet gereproduceerd... Zowel FF 1.0.7 als IE6 zetten de <div>s naast elkaar. Zelfs als ik het browservenster <100 px maak. Doet het probleem zich voor bij specifieke browsers / browserversies?

[Zeezicht]

Nee dat gebeurt ook in FF 1.0.7 en IE 6. Het zou kunnen dat door de inhoud van het originele veld het probleem wordt veroorzaakt. Dat is hier te vinden.

De link in het eerste bericht is de geschoonde versie. Die div's daarin kan ik makelijk aanpassen, en hopelijk daarmee het probleem oplossen.

[Zeezicht]

Ik heb even een screenshot gemaakt van het probleem (FF 1.07):


De vraag is dus hoe ik kan voorkomen dat de derde kolom verplaatst?

[Willem]

Eerst eens wat debuggen en opschonen, en waarom ben je niet verder gegaan in je vorige topic?

[Zeezicht]

Dat topic was al behoorlijk oud, ik dacht dat het niet de bedoeling was om daar dan weer verder te gaan.

Maar in de startpost staat de geschoonde versie, en later ergens een versie met daarin de data die uit een DB komt. Zodat beide bekeken kunnen worden.
Screenshot staat erbij, omdat niet iedereen het effect te zien krijgt. Het komt namelijk onregelmatig voor en waardoor weet ik dus ook niet precies.

[Zeezicht]

Niemand die een oplossing hiervoor weet?

Hieronder staat de code die gebruikt is voor de 3 kolommen:

code:

<a name="top"></a>
<div id="top"></div>
<div id="container">
    <div id="Leftside">
                Menu
        <div class='button'>button</div>
    </div>
    
    <div class="main">
        Middenvak
    </div>

    <div id="Rightside">
            Rechterkolom
    </div>
    <div style="clear: both;"></div>
</div>

En de CSS die hierbij hoort:

code:

#container {
  margin-top: -80px;
  margin-left: 0px;
  padding: 0 0 0 0;
  width: 990px;
  text-align: left;
  border: 0px;
  display: table;
}

div.main {
    background: url('gfx/bg.jpg') repeat-y left;
    border: 1px solid #a9a9a9;
    background-color: #fff;
    display: block;
    padding: 5px;
    z-index: 2; 
    width: 545px;
    float: left;
    overflow: hidden;
    height: 100%;
}

#Leftside {
  width: 150px;
  float: left; 
  margin: 0px; 
  margin-right: 8px;
}

#Rightside {
    width: 240px; 
    float: left;
    background-color: #5999AB;
    margin: 0px;
    margin-left: 8px;
    padding: 5px;
    height: 100%;
    display: block;
}

Kan ik bijvoorbeeld dmv van overflow zorgen dat de schermen niet verplaatsen?

[XangadiX]

als ik jouw was zou ik het gewoon eens proberen en als je specifiekere vragen hebt terugkomen; dit topic is nu een beetje een rommeltje en niemand weet precies waar het over gaat.

Probeer gewoon eens verschillende methodieken uit en bouw desnoods in een demo omgeving je stylesheet nog een keer; dan kom je er vast wel uit. Als je dan problemen hebt kun je je demo posten en die is dan veel duidelijker dan een complete site met alles erop en eraan.

succes!