Umschließenedes DIV-Element verweigert Höhe
Fragenfrager
- css
Hallo liebes Forum,
das folgende Problem tritt _nicht beim IE, sondern nur beim Firefox und Opera auf.
Ich habe folgende Code-Struktur (verkürzt):
<div id="maindiv">
<div id="navi_left">
</div> <!-- navi_left -->
<div id='content'>
</div> <!-- Ende div content -->
</div> <!-- Ende maindiv -->
Das DIV "maindiv" umgibt die beiden anderen und soll dementsprechned aus optischen Gründen höher als die beiden anderen sein. Der Inhalt des DIVs "content" ist dynamisch erstllt und variiert, daher kann ich "maindiv" auch keine feste Höhe zuweisen. Ich lasse im css die height-Angabe daher weg, so dass "Auto" verwendet werden müsste. Trotzdem wird mir das "maindiv" nur als Einzeiler dargestellt. Hier noch die CSS zu den einzelnen DIVs.
Wo liegt mein Fehler?
#maindiv
{
border-color:#000000;
border-style: solid;
border-width: 1px;
background-color:#c0c0c0;
width:95%;
height:auto;
padding:10px ;
position:realtive;
margin: 0px auto 0;
text-align: left;
}
#navi_left
{
border-color:#000000;
border-style: solid;
border-width: 1px;
background-color:#ffffff;
width:17%;
height:80%;
padding:0px 10px;
position:relative;
margin: 10px auto 0;
text-align: left;
float:left;
}
#content
{
border-color:#000000;
border-style: solid;
border-width: 1px;
background-color:#ffffff;
width:75%;
height:80%;
padding:10px 10px;
position:relative;
margin: 10px auto 0;
text-align: center;
float:right;
}
Vielen Dank für die Hilfe.
das folgende Problem tritt _nicht beim IE, sondern nur beim Firefox und Opera auf.
Wie üblich ...
<div id="maindiv">
<div id="navi_left">
</div> <!-- navi_left -->
<div id='content'>
</div> <!-- Ende div content -->
</div> <!-- Ende maindiv -->
Trotzdem wird mir das "maindiv" nur als Einzeiler dargestellt. Hier noch die CSS zu den einzelnen DIVs.
Wo liegt mein Fehler?
Du hast die CSS-Anleitung nicht gelesen und sitzt einem Fehler im IE auf.
#navi_left
{
float:left;
}
#content
{
float:right;
}
http://www.w3.org/TR/CSS2/visuren.html#floats, dritter Absatz. Abhilfe sollte ein Element mit clear:both am Ende von #maindiv schaffen.