Baggrund mangler i FF, men ikke i IE

Når jeg sætter height på din #maincontainers01 vises det rigtigt i firefox

Hvis du sætter dette " position: absolute; bottom: 0; " på din #maincontainers01 ser det ud til at løse dit problem

Fandt lige denne "<br style="clear:both" />" som skal sættes som det sidste, lige inden din </div> på #maincontainers01,
som også får din div til at følge de andre div, hvis der sættes mere indhold i dem

Jeg fik det til at virke efter dine råd, men jeg definerede kun en højde og brugte "<br style="clear:both" />" lige inden </div> på maincontainers01. Position:absolute bringer den hvide baggrund frem, men det går ud over layout'et når man resizer browser vinduet.

Om ikke andet tak for din hjælp og besvar venligst så du kan få dine point.

jeg var lidt for hurtig der. Jeg glemte af teste ved at indsætte mere data, så maincontainers01 også følger de andre div tags i fald der indsættes mere indhold. Så det er ikke helt løst endnu.

Status er at en defineret højde på div tag'et maincontainers01 bringer den hvide baggrund frem, men så skal der være den samme mængde indhold på alle siderne for at det skal virke ellers vil div tag'et være længere end de andre.

height: auto; eller inherit bringer ikke den hvide baggrund frem i FF. Hvad jeg ikke forstår er hvorfor bagrrunden i det hele taget er væk, når den vises bag de andre div tags. Samme metode burde gøre det muligt at få den frem, men nej.

ok, that's it, jeg tilføjede float: left til maincontainers01 og så virkede det. Jeg kan desværre ikke gi dig point da, dit forslag medbragte layout problemer ifm. at resize browser vinduet, men tak alligevel.

Det er helt ok, men nu ligger dine div jo i venstra side i IE derfor KUN denne <br style="clear:both" /> eller sætte denne på din #maincontainers01 position: absolute; bottom: 0; ikke noget med Height på den div

Det er rigtigt at de to forslag du lige skrev ikke gør noget med height, men den hvide baggrund dukker frem vha float:left (skør som FF er) uden at pille ved layout'et. At de flyder til venstre side er ikke synligt (i IE) så vidt jeg kan se.

I min gamle IE6 ser det sådan her ud nu http://www.prebendahl.dk/test-sider/ie-arun.jpg men det er måske med vilje du har lavet det sådan ;-)

aha, tak for tippet.

(ie dobbelt margin bug:
Undgå left margin på et element floatet left
undgå right margin på et element floatet right)

det er som om float left eller right er absolut i sin adfærd. Hvis bare der fandtes en flexible løsning der gjorde at elementer floatede og reagerede på en bestemt margin. Men det bliver jeg vel nødt til at oprette et nyt spørgsmål om.

Du kan floate det venstre element mod venstre
og det højre element mod højre og flytte margin fra de
to til det omkransende elements henholdsvis padding left og right.
(d.v.s. padding på #maincontainers01 og ingen margin på de indvendige
floatede left elementer ... så mangler du selvfølgelig afstand imellem
de floatede left elementer, men der kan du give de to af dem en margin right
på så der kommer afstand - float left og margin right er uden problemer. )

... Alternativt kan du køre et element indvendig i de floatede left
elementer og så ikke floate det indvendige element, men lægge en left
margin på elementet (omkransende float elementer) - eller floate det
ydre element mod left og så lave et indvendigt element med mindre width
det floater mod right.

(Så er der selvfølgelig tabeller eller position absolute elementer,
men jeg vil anbefale det første af de fem løsningsforslag.)

- Årsagen til at det sidste element bryder ud mod venstre nedenunder det
andet floatede left element er fordi at der ikke er nok plads efter at
IE har fordoblet den venstre margin...

^ - d.v.s. hvis det skal bruges skal højre
kolonne outputtes før midderste kolonne

<div id="maincontainers01">
<div id="leftcolumn01">...
<div id="rightcolumn01">...
<div id="middlecontainer">...
</div>

og disse rettede css regler




#rightcolumn01{
margin-top: 20px;
margin-bottom:20px;
width:171px;
border:1px solid #D4D4D4;
float:right;
background-color:#FFFFFF;
}



#middlecontainer{
width:367px;
background-color:#FFFFFF;
border:1px solid #D4D4D4;
margin: 20px auto;
}


#leftcolumn01{
margin-top:20px;
margin-bottom:20px;
width:171px;
border:1px solid #D4D4D4;
float:left;
background-color:#FFFFFF;
}





#maincontainers01{
margin-top:25px;
margin-left:0px;
width:796px;
background-color:#FFFFFF;
border:2px solid #FFCC33;
float:left;
padding:0 20px;


}

Hov float skal lige af info også...

Mange tak for det mclemens. Især padding i #maincontainers01 var specielt overset:)

Velbekomme :o)