Forum Moderators: not2easy
My problem is that IE is adding space at the bottom of the page.
Here is my code, is there a better way to accomplish this..?
the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main"><div id="tier1">
</div><!-- tier1 --><div id="tier2">
</div><!-- tier2 --><div id="tier3">
</div><!-- tier3 --><div id="tier4">
</div><!-- tier4 --></div><!-- main -->
</body>
</html>
the CSS
body {
margin: 5px 0 0 0;
background-color: purple;
}#main {
width: 800px;
height: 600px;
background-color: red;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin-bottom: 0px;
}#tier1 {
width: 185px;
height: 385px;
background-color: orange;
float: left;
position: relative;
left: 10px;
top: 10px;
}#tier2 {
width: 585px;
height: 185px;
background-color: yellow;
float: left;
position: relative;
left: 20px;
top: 10px;
}#tier3 {
width: 585px;
height: 185px;
background-color: green;
float: left;
position: relative;
right: 175px;
top: 220px;
}#tier4 {
width: 185px;
height: 385px;
background-color: blue;
clear: left;
position: relative;
bottom: 180px;
left: 605px;
}
if there is a better way to create this please let me know, its seems that css is finiky it makes me want to go back to trusty tables
what about just general css layout where the page background is centered or the main frame of the website is centered..?
#main {
width: 800px;
height: 600px;
background-color: red;
margin: 0 auto;
padding: 0px;
margin-bottom: 0px;
overflow: hidden;
position: relative;
}
