[CSS] Tekst wordt verkeerd uitgelijnd

[krietjur]

Allereerst even wat code..

HTML:

<div id="container">
   <div id="menu">menuitem<br />menuitem<br /></div>
   <div id="content">content<br />content<br />content<br />content<br />content<br /></div>
</div>

Cascading Stylesheet:

#container {
position: absolute; 
top: 0; 
left: 0;
width: 1000px;
border-right: 0px solid gray;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#content {
padding-left: 15px;
margin-left: 149px;
background-color: rgb(255,255,255);
border-right: 1px solid gray;
border-left: 1px solid gray;
}

#menu {     
float: left;
width: 150px;
margin: 0px;
padding-left: 5px;
background-color: rgb(255,255,255);
border-right: 1px solid gray;           
}

Dit levert dan het volgende op:


Zoals je ziet verschuift zowel in IE als in firefox de tekst "content", zodra er geen "menuitems" staan. Wanneer er in het menu gedeelte evenveel, of meer regels staan dan in het contentgedeelte gaat het wel goed. Nou ben ik pas sinds kort bezig met css en ik heb dus geen idee waar ik de fout kan vinden..

[crisp]

Het verschuiven in IE is de beruchte 3-pixel bug
wb Firefox: geef je #content en je #menu eens een volledige border en je ziet wat er mis is: je geeft te weinig margin-left op; je menu-box overlapt daardoor je content-box.

[krietjur]

Thanks! Wist niet waar ik het probleem moest zoeken, maar het is nu opgelost dus.. in Firefox was het dus inderdaad de overlap die voor problemen zorgde, de 3 pixel bug van IE heb ik als volgt de nek omgedraaid:

Cascading Stylesheet:

* html #content {
height: 1%;
margin-left: 0;
}