Float problem

Hej på er!

Har ett problem med float. Jag har en div med en bakgrundsfärg. I denna div har jag sedan två divar; den ena med float: left och den andra med float: right.
När någon av dessa blir längre än diven som de ligger i så hamnar texten utanför. Det beror ju på att en div som har en float hamnar utanför diven den ligger i. Min fråga är då: Hur kan man lösa detta?

Sidan:
http://gd.famstromgren.se/?sida=user/avtal

CSS:
http://gd.famstromgren.se/css/standard.css

Tack på förhand!

<div id="vänster"></div>
</div id="höger"></div>

<div style="clear:both"></div>

Det fungerar inte... :(

Jag la en bakgrundfärg och lite höjd på den diven med clear: both. Som ni ser så hamnar den rätt, men det förlänger inte den vita färgen iallafall.

Hmm..
Det är skillnad på och height och min-height ;)

#wrapper {
...
height: 100%;
...}

ser ut att kunna vara en stor del av problemet (eftersom den innebär att alla bakgrunder i #wrapper slutar repetera sig längre än 100% av fönsterhöjden om dokumentet är högre än fönsterhöjden)...

Det *borde* bli bättre om du kör med

#wrapper {
... 
min-height: 100%;  /* som det egentligen skall vara */
...
}
* html #wrapper {
height: 100%;  /* som behövs för MSIE6 och tidigare */
}

Du kan också prova att ta till en villkorlig kommentar (kolla t.ex. hur höjden hanteras på #container i http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html )

Kan vara värt att notera att MS har fixat 'height' och implementerat 'min-height' i IE7, så om du använder en konditionell kommentar borde det vara

<!--[if lte IE 6]>

för att det ska fungera korrekt i IE7.

Tror att jag har gjort som jarvklo sa, men det hjälper inte. Kan tillägga att både IE7 & 6 inte vill vara med på min-height, om jag inte gjort fel vill säga.

Hmm...

Du behöver flytta din "clear-div" så att den ligger i #wrapper och inte som nu i #content...

Flytta alltså ner raden

			<div style="height: 100px; background-color: #CC0000; clear: both;">&nbsp;</div>

så att den ligger framför din sista </div> i body ;)

OT:
zcorpan - tack den hade jag missat.
Jag har uppdaterat exemplet nu :bire

zcorpan skrev:

Kan vara värt att notera att MS har fixat 'height' och implementerat 'min-height' i IE7

Åh! Intressant! :D
Har du mer info om detta? Är det fixat till 100%? Gäller det bara Standards Mode, med vissa Doctypes etc.?

Man får tacka så mycket :) Nu är det bara att få det att fungera i IE 7. Ska kolla på länken som finns ovan..

Verkar inte som om nått av de fungerar i IE7, men det kanske kommer att implementeras senare.

Troxy skrev:

Åh! Intressant! :D
Har du mer info om detta? Är det fixat till 100%?

Så vitt jag kan se fungerar det korrekt (förutom när man triggar hasLayout med zoom:1 eller writing-mode:tb-rl).

Troxy skrev:

Gäller det bara Standards Mode, med vissa Doctypes etc.?

Ja. Quirks mode i IE7 kommer vara ungefär samma som quirks mode i IE6.

andreaswebb skrev:

Verkar inte som om nått av de fungerar i IE7, men det kanske kommer att implementeras senare.

Vad fungerar inte i IE7 (bortsett från att konditionella kommentarer kanske matchar fel i vissa beta previews)?

Det kommer inte ske några förändringar i renderingsmotorn (mer än kanske mindre bugg-fixar) från MIX06-releasen.

det vita går inte hela vägen ner i min, men ser att det släppts en ny version den 20:e mars.