Probleempje hier ..
Ik heb 3 div's met een float left in een div met breedte 595. De hoogte van de pagina is 545. Nu wil ik de drie kolommen vullen met andere div's en moet er rechts een scrollbar komen als het niet meer onder elkaar past.
Nu dacht ik dat het mooi zou zijn om met procenten te werken, zodat als er geen scrollbalk is de volledige breedte van de div gebruikt wordt. Hier ontstaat echter het probleem dat de breedte in internet explorer afwijkt van mozilla/opera.
Als ik de kolommen op width:33% zet zijn ze in internet explorer breder dan mozilla/opera. Ik kan ook kolom 3 een float:right geven maar de kolommen blijven dan een ongelijke breedte wat dus lelijk blijft.
Mijn vraag is dus of dit een fout in mijn code is of een fout van internet explorer en hoe dit te verhelpen is.
Mijn code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Centered block test</title>
<style type="text/css">
<!--
div.favorietencontainer
{
border:0px solid black;
width:595px;
margin:5px;
height:545px;
overflow:auto;
}
div.favorieten1
{
background-color:Green;
float:left;
width:32%;
}
div.favorieten2
{
background-color:blue;
float:left;
width:32%;
}
div.favorieten3
{
background-color:Yellow;
float:left;
width:32%;
}
div.favgroupcontainer
{
min-height:36px;
height:36px;
border:1px solid black;
margin-bottom:5px;
}
-->
</style>
</head>
<body>
<div class="favorietencontainer">
<div class='favorieten1'>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
</div>
<div class='favorieten2'>
<div class='favgroupcontainer'></div>
</div>
<div class='favorieten3'>
<div class='favgroupcontainer'>
</div>
</div>
</body>
</html>
ps: heb de search gebruikt maar geen overeenkomende problemen gevonden.
Ik heb 3 div's met een float left in een div met breedte 595. De hoogte van de pagina is 545. Nu wil ik de drie kolommen vullen met andere div's en moet er rechts een scrollbar komen als het niet meer onder elkaar past.
Nu dacht ik dat het mooi zou zijn om met procenten te werken, zodat als er geen scrollbalk is de volledige breedte van de div gebruikt wordt. Hier ontstaat echter het probleem dat de breedte in internet explorer afwijkt van mozilla/opera.
Als ik de kolommen op width:33% zet zijn ze in internet explorer breder dan mozilla/opera. Ik kan ook kolom 3 een float:right geven maar de kolommen blijven dan een ongelijke breedte wat dus lelijk blijft.
Mijn vraag is dus of dit een fout in mijn code is of een fout van internet explorer en hoe dit te verhelpen is.
Mijn code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Centered block test</title>
<style type="text/css">
<!--
div.favorietencontainer
{
border:0px solid black;
width:595px;
margin:5px;
height:545px;
overflow:auto;
}
div.favorieten1
{
background-color:Green;
float:left;
width:32%;
}
div.favorieten2
{
background-color:blue;
float:left;
width:32%;
}
div.favorieten3
{
background-color:Yellow;
float:left;
width:32%;
}
div.favgroupcontainer
{
min-height:36px;
height:36px;
border:1px solid black;
margin-bottom:5px;
}
-->
</style>
</head>
<body>
<div class="favorietencontainer">
<div class='favorieten1'>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
<div class='favgroupcontainer'></div>
</div>
<div class='favorieten2'>
<div class='favgroupcontainer'></div>
</div>
<div class='favorieten3'>
<div class='favgroupcontainer'>
</div>
</div>
</body>
</html>
ps: heb de search gebruikt maar geen overeenkomende problemen gevonden.