Hi,
Can some guru help me to check what have I done incorrectly in this simple css layout? After I adjusted the div on top before the content div, the content and footer div is all aligned to far right which I never adjusted. I tried to move it back inside the container and align the content to left but failed. I am wondering how come the div from content to footer will move to such position.
Besides, can you give me an idea what I have done on the top positioning is correct or not. I can get the positioning of the div i want on top before the content but i am wondering why negative value is required to make it fit into the container.
Please advise and thanks.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#page-container {
width: 960px;
margin: 0 auto;
}
#main-nav {
height: 30px;
position: relative;
background-color: #CFF;
width: 300px;
top: -95px;
left: -145px;
float: left;
}
#sidebar-a {
background: darkgreen;
float: left;
position:relative;
}
#content {
background: green;
width: 960px;
position: relative;
}
#footer {
background: orange;
height: 66px;
}
#logo {
width : 200px;
height: 100px;
margin-top:52px;
padding-left:10px;
position: relative;
}
#mailinglistbox {
width : 450px;
height: 50px;
background-color:#09F;
margin-right:220px;
float:left;
position: relative;
left: 225px;
top: -115px;
}
#topcontactbox {
width : 250px;
height: 30px;
background-color:#FF6;
margin-right:120px;
float:left;
position: relative;
left: 695px;
top: -155px;
}
body {
margin-top: 0px;
background-image: url(images/mainbg.jpg);
background-repeat: repeat-x;
background-color: #F0F4F5;
}
</style>
</head>
<body>
<div id="page-container">
<div id="logo"><img src="images/logo.gif" width="179" height="82" /></div>
<div id="mailinglistbox">mailing list box</div>
<div id="topcontactbox">contact</div>
<div id="main-nav">Main Nav</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
