Ik ben bezig met een site compleet met CSS en DIV's alleen nu heb ik een probleem. Ik heb een 'grote' div met daarin een div voor het menu en eentje voor de content. Alleen nu wil ik dat die grote div automatisch zo'n height krijgt dat alle content erin past. In IE doet hij dit gewoon alleen in FF niet. Iemand een idee?
Heb je een voorbeeldje van het probleem?
edit: en oja, probeer eens display:block; in de style van je div. Werkt vaak als oplossing voor verschillende problemen (en maakt er ook weer een paar)
Je moet een div onder het menu en de content in de hoofd-div maken. De nieuwe div geef je in css clear: both; Dan moet het werken!
Gewoon zo:

height: auto;

dacht ik
Dank je wel, het werkt nu. Alleen ik krijg weer een paar andere problemen. In IE laat hij sommige stukjes van de border van de div met content niet zien. Steeds als ik op Vernieuwen klik weer een ander stukje. Echt vaag.

Verder zou ik ook graag hebben dat het menu de hele hoofd div vult. Ik heb het eerst gewoon geprobeert met height: 100%. Maar dit deed hij alleen in IE en nu helemaal niet meer.
height: auto doet het alleen in IE, niet in FF
Ik ken het probleem, vele uren werk aan gehad, maar ook ik heb geen oplossing gevonden.... als iemand het weet?
Zet html{height:100%}
body{height:100%}


Dat je in IE stukjes rand niet ziet komt door een IE bug.
Dit heb ik ook al geprobeerd maar het werkt echt niet
ronaldo schreef op 23.04.2005 17:31
Dit heb ik ook al geprobeerd maar het werkt echt niet


Erg vreemd ja.

Bekijk de volgende site en css eens. Daar werkt het namelijk wel.

Site
css
ja ik zie het alleen bij mij doet hij het niet. Zo ziet het er nu uit:
<html>
<head>
html { padding:0px;
margin-left:auto;
margin-right:auto;
height:100%;
}
body {
margin-left: auto;
margin-right:auto;
height: 100%;
}
.container { width:760px;
height: auto;
margin-left: auto;
margin-right:auto;
padding-left: 0px;
}
.menu {
width: 155px;
height: 100%;
float:left;
background-color: #000000;
}

.menu ul{
margin-left: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.menu li a{ width: 153px;
display: block;
margin-top: 0px;
margin-bottom: 0px;

}


.content {
width: 572px;
float: left;
}
.content2{
padding-bottom: 10px;
padding-left: 10px;
padding-top: 10px;
}
.footer { width: 100%;
margin-top: 5px;
margin-left: auto;
margin-right:auto;
font-size: 10px;
float:left;
}

.tekst { float:left;
width: 345px;
}
.img { float:right;
width: 210px;
}


</style>
</head>

<body>

<div class="container">
<img src="logo5.jpg">
<div style="float: left; width: 156px;">Menu</div>
<div style="float:left; width: 573px; ">Home</div>

<div class="menu">

<ul>
<li>
<a href="#">Hier komt het menu</a>
</li>

</ul>

</div>
<div class="content">
<div class="content2">
<div class="tekst">
hier komt tekst
</div>
<div class="img">
hier komen foto's
</div>

<div style="clear: both; "></div>
</div>
<div style="clear: both; "></div>
</div>
<div class="footer">Footer</div>

<div style="clear: both; "></div>
</div>

</body>
</html>

Reageren