CSS border gaat niet mee met div in Firefox

[Maverick2001]

Ik heb voor een site een div (divcont) gemaakt met een border eromheen. Binnen deze div heb ik 2 nieuwe divs gemaakt (een linker en een rechter kolom). Nu is het zo wanneer ik in de rechter div iets typ hij wel de hoofd div (divcont) uitrekt echter wanneer ik in de linker kolom iets typ gaat hij buiten deze div.



Omdat de inhoud van de divs variabel is kan ik geen vast waarde voor de hoogte van de div instellen. Ik heb al de float weggelaten echter dat heeft weer een negatief gevolg voor de positionering.

HTML ziet er als volgt uit:

code:

<div id="cont">
<div id="divmidden"></div>
<div id="divpoll"></div>
</div>

CSS

Cascading Stylesheet:

#cont {
    width: 819px;
    height:auto;
    border: 2px solid #00FF00;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#divmidden {
    width:600px;
    margin-left:0px;
    float:left;
}

#divpoll {
    width:170px;
    margin-left:640px;  
    }

[ Voor 13% gewijzigd door Maverick2001 op 02-05-2006 11:14 ]

[JHS]

Je float de div, dus zal je de parent moeten clearen . Zie deze testcase.

[Verwijderd]

hiervan is de laatste het netste eigenlijk
hasLayout is overigens ook te forceren door

Cascading Stylesheet:

zoom: 1;

dat vind ik wat netter en berust niet op de underscore hack. Zoom is dan wel geen geldige CSS property, maar die wordt dus gewoon genegeerd door andere browsers, zoals het hoort met CSS properties die ze niet begrijpen

[Maverick2001]

JHS schreef op dinsdag 02 mei 2006 @ 11:25:
Je float de div, dus zal je de parent moeten clearen . Zie deze testcase.

Dat werkt perfect thnx.

Ben nog wel benieuwd hoe je dat "zoom" bedoeld...

[JHS]

Verwijderd schreef op dinsdag 02 mei 2006 @ 11:39:
dat vind ik wat netter en berust niet op de underscore hack.

Normaal zet ik die dan ook in een met een conditional comment geïnclude CSS bestand .

Maverick2001 schreef op dinsdag 02 mei 2006 @ 11:53:
[...] Ben nog wel benieuwd hoe je dat "zoom" bedoeld...

IE past dit alleen toe als er een hasLayout flag in hun renderengine staat. Dat kan je forceren door height: 1%; mee te geven, of zoals /me zegt door zoom: 1; mee te geven. Die laatste wordt door andere browsers genegeerd, aangezien het niets betekend. Bij de eerste moet je voorkomen dat andere browsers het oppikken, anders is je div te klein .

[Verwijderd]

ik weet even niet hoe de stand van zaken met IE7 nu is, maar stel dat de underscore bug wordt opgelost en de haslayout bug niet dan heb je een probleem, vandaar dat ik het liever zo doe.