Cleara floats

Jag har stört mig otroligt länga på att jag inte hittat något bra sätt att cleara floats i en container. Har fått köra med <br style="clear:both"> men det skär i hjärtat varje gång jag skriver koden som bara är till för presentationen. Avbryter man inte en float får man denna effekt.

Så idag snubblade jag över en artikel på SitePoint som förklarde hur man gjorde. Och det var precis hur enkelt som helst!

Såhär funkar det.

<div id="outer">
   <div id="inner">
      <h1>Rubrik</h1>
      Text 1
   </div>
   Text 2
</div>

#outer {
   border: solid 1px red;
   width: 200px;
   overflow:auto;
}
#inner {
   border: solid 1px blue;
   float: left;
}

Resultatet blir då:

Det är alltså overflow:auto på det yttre elementet som är det magiska! Att man inte kom på det tidigare…

Posted by in Css

Tags: ,

Permalink 2 Comments

2 responses to “Cleara floats

  1. Ett tillägg: Ibland kan du dessutom behöva lägga till width: 100% för att IE6 (triggar hasLayout) ska spela med. Kan vara värt att lägga på minnet.

  2. Aha, tackar. Sen jag fick Vista och inte längre kan köra Multiple IE har det blivit att jag inte kollat sidorna så noga i IE6. IE6 föresten, finns det kvar? =)

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *