Hi I am working on a table-less fluid layout that is fairly simple but I noticed when you resize the window in IE6 by dragging the edge of the window it sometimes displays the layout of the divs wrong. This does not happen in FF. Any help, yes please!
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>margins and padding</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="container">
<div id="leftcontainer"></div>
<div id="middlecontainer"></div>
<div id="rightcontainer"></div>
</div>
<div id="content">Content for id "content" Goes Here</div>
</div>
</body>
</html>
css:
- Code: Select all
body {
color: #000000;
background-color: #FFFFFF;
margin: 10px;
}
#wrap {
width: 96%;
background-color: #CCCCCC;
margin-right: auto;
margin-left: auto;
height: 500px;
}
#leftcontainer {
background-color: #666666;
width: 30%;
height: 80px;
float: left;
}
#middlecontainer {
background-color: #CCCCCC;
width: 30%;
height: 80px;
float: left;
margin-right: 5%;
margin-left: 5%;
}
#rightcontainer {
background-color: #666666;
width: 30%;
height: 80px;
float: right;
}
#container {
background-color: #FFFFFF;
width: 100%;
height: 80px;
}
#content {
background-color: #666666;
color: #FFFFFF;
margin-top: 10px;
margin-bottom: 10px;
}