Hoogte kwijt na float gebruik.

[Verwijderd]

Dag mensen,

Ik bouw behoorlijk veel websites in html/css, maar valt het me telkens weer op dat wanneer ik een holder heb en daar div's in laat floaten dan is de browser de hoogte van de holder kwijt. Zie structuur:

<div id="holder">
<div id="left">left</div>
<div id="right">rechts</div>
</div>

De floats blijven wel mooi in de holder staan maar aangezien hij geen hoogte erkent (kan je zien met de holder een border mee te geven) kan je alles wat onder de holder div komt niet afstemmen.

Denk bv aan een footer, je wilt dat je footer minimaal een margin van 20px top krijgt. Om te voorkomen dat alles op elkaar staat. Maar je footer weet niet van wanneer hij een margin moet gaan gebruiken omdat de hoogte van de holder niet bekent is (dynamisch).

Dit werkt ook in de nadeel wanneer de holder een background-image zou hebben, dan zou je met een min-height moeten werken..

Hoe lossen jullie dit eigenlijk op?

Ik was benieuwd of mensen dit probleem ook erkennen en mij een tip kunnen geven hoe dit wel kan.

gr

[console]

overflow:hidden; ?

[Verwijderd]

Zo dat was simpel. lol bedankt

[MoietyMe]

Good Fella in "float: left; probleem"

Lees dat topic anders eens door. Staan best interessante reacties tussen.

Eigenlijk hoort hij zo:

Cascading Stylesheet:

div#root:after {
    content:"\0000a0";
    display:block;
    height:0;
    clear:both; 
    visibility:hidden;
}

Als je dan je div#root een width:; geeft dan doet hij hem ook gelijk clearen in IE6(?) & IE7. Ik heb in mijn CSS gewoon een standaard class genaamd .clear met daarop deze declaraties. Geef de class clear aan een element en je zit goed

[ Voor 100% gewijzigd door MoietyMe op 23-12-2010 11:59 ]

[keejoz]

Een div onder plaatsen en clear: both toepassen werkt ook fijn. (Denk aan je footer etc )

[pasz]

Of gebruik voor de gein eens een grid framework:

http://www.webhostingsear...-amazing-grid-systems.php

[RobIII]

Lees http://www.quirksmode.org/css/clearing.html er even op na

keejoz schreef op donderdag 23 december 2010 @ 12:00:
Een div onder plaatsen en clear: both toepassen werkt ook fijn. (Denk aan je footer etc )

...maar is wel extra/onnodige markup

[ Voor 65% gewijzigd door RobIII op 23-12-2010 12:06 ]