Div utan fast bredd i IE6 blir 100% bred

Hej!

Jag har ett problem som jag inte kunnat lösa utan att använda mig av en tabell. Jag håller på att utveckla en sida som skall vara bakåtkompatibel med IE6 (jag vet, det är värdelöst).

Hur som helst så har jag en div som är satt till 100% bredd. Den innehåller i sin tur 4 divar varav tre av dessa har fast bredd och alla floatar left. Typ så här:

<div id="huvuddiv">
<div id="div1" style="float: left; width: 100px"></div>
<div id="div2" style="float: left;"></div>
<div id="div3" style="float: left; width: 100px"></div>
<div id="div4" style="float: left; width: 100px"></div>
</div>

Problemet är att div nr2 blir 100% bred av det utrymme som finns kvar efter att div1 tagit 100px vilket gör att det blir en radbrytning och div3 och div4 hamnar på en egen rad.

Går detta att lösa utan att använda sig av en tabell istället?

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.

Tack som fan. Jag hade lite problem med display: inline-block; vilket gjorde att det funkade i IE6 men såg konstigt ut i alla andra webbläsare men jag löste det genom att inte sätta display till någonting för att få det att se okej ut i alla nyare webbläsare och height till 100% för att trigga haslayout i IE6.

Tack!