Fallande div problem

Har sen en tid tillbaka lyckats hitta en lösning till problemet med fallande flytande div´s. Om man som jag alltid försöka lösa allt stylande av element på html-sida så man garanterat stött på problemet med fallande div dvs float:left för att få div-element att ligga sida vida sida. Min lösning ser ut som följer:

//css-fil
#container{
display:table;
}

#left{
float:left;
width:100px;
height:100px;
border:1px solid #CCC;
}

#right{
float:left;
width:100px;
height:100px;
border:1px solid #CCC;
}

//html
<div id=”container”>
<div style=”display: inline”>
<div id=”left>Vänster</div>
<div id=”right”>Höger</div>
</div>
</div>

Lösningen är alltså en extra omslutande div där man använder display:inline för att hindra divarna att falla. Anledning till att jag använder table istället för block när det gäller display för elementet container är att annars tar det inte upp sin fulla höjd. Problemet med fallande divar har jag upplevt i Firefox och jag har även läst att det är någon form av bugg. För divarna faller inte varje sidvisning.

Hoppas att det hjälper någon

Comments are closed.