I'm changing the layout of my site. Instead of using tables, I will use
DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not
the correct width. Mozilla and Opera are showing the page the way I
want. Does anybody know a solution for this?
First of all, the code I am using:
CSS
-------
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
}
div {
position: absolute;
margin: 0;
}
div.header {
position: absolute;
background-attachment: scroll;
width: 100%;
height: 27px;
left: 0;
right: 0;
top: 0;
bottom: auto;
background-color: FF00FF;
z-index: 999;
overflow: hidden;
}
div.logo {
position: absolute;
width: 133px;
height: 73px;
left: auto;
right: 0;
top: 0;
bottom: auto;
background-color: 0FF00F;
z-index: 1000;
}
div.search {
position: absolute;
left: 180;
right: 133;
width: auto;
height: 46px;
top: 27;
bottom: auto;
background-color: FFF00F;
z-index: 1000;
overflow: hidden;
}
div.layoutimage {
position: absolute;
width: 180px;
height: 120px;
left: 0;
right: auto;
top: 27;
bottom: auto;
background-color: 000FF0;
}
div.leftbar {
position: absolute;
width: 180px;
height: auto;
left: 0;
right: auto;
top: 147;
bottom: auto;
background-color: 00FFFF;
}
div.rightbar {
position: absolute;
width: 180px;
height: auto;
left: auto;
right: 0;
top: 73;
bottom: auto;
background-color: 00FFFF;
}
div.content {
position: absolute;
width: auto;
height: auto;
left: 180;
right: 180;
top: 73;
bottom: auto;
background-color: F0F0F0;
}
-------
HTML
-------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet href="div.css" type="text/css" media="screen">
</head>
<body>
<div class="header">Header</div>
<div class="logo">Logo</div>
<div class="layoutimage">Layoutimage</div>
<div class="leftbar">Leftbar</div>
<div class="rightbar">Rightbar</div>
<div class="search">Search</div>
<div class="content">Content</div>
</body>
</html>
-------
What's going wrong? The search- and the content DIV are not wide enough
when there is not so much content in it that it multiple lines of text
are needed. When there is enough content in it, it's working fine. How
can I make these two DIVs to listen to my CSS-properties and get rid of
the whitespace next to them in IE6? To make it sure, I'm describing the
yellow and the gray DIVs.
The URLs where these files are:
As described above: http://cglabbee.speed.planet.nl/test/div1.html
More content in the DIVs: http://cglabbee.speed.planet.nl/test/div2.html
The stylesheet: http://cglabbee.speed.planet.nl/test/div1.css
