Välkommen till WebForum! :bire
Det är principen i dit exempel du vill veta gissar jag. :)
I ditt exempel #div2 ta den bredd som är kvar av 100% i #huvuddiv. Då kan den inte ha float eftersom den då krymper för att passa sitt innehåll. Men med float:none och width auto tar den all bredd den kan få utan att känna av de tre divar som har float. Lösningen är att ge #div2 en overflow clearing så att den känner av element med float. För gamla IE triggar vi hasLayout.
(Overflow, med ett annat värde än visible, gör att #div2 måste beräkna var dess gränser är för att veta var eventuellt overflow börjar. Gränserna måste då också ta hänsyn till element med float och inte låta dem komma över gränsen om de får plats vare sig de är på insidan eller på utsidan som här. #Div2s gränser blir därmed clearade mot floats. I gamla IE fungerar hasLayout som clearing (sök på "haslayout trigger").)
Nu har vi blandade floats och icke floats. Eftersom boxarna med float hindras att flyta upp om det finns icke floats, måste de flyttas i koden så de kommer före.
För att #div3 och #div4 ska ge plats åt #div2 på vänster sida byter vi riktning på deras float.
Ditt exempel nu:
<div id="huvuddiv">
<div id="div1" style="float:left; width:100px"></div>
<div id="div3" style="float:right; width:100px"></div>
<div id="div4" style="float:right; width:100px"></div>
<div id="div2" style="display:inline-block; overflow:hidden;"></div>
</div>
Trigga IE5.5-7 till hasLayout med TripSwitch upptäckt av Clair Cambell.