Forum Moderators: not2easy
I'm trying to use css to line up my div tags, i need the logo and banner to both line up to the top edge of the container div but the banner is going after the logo. I also can't get the left and right column to align side by side, they will align in IE 7 but not in firefox. I am new enough to all this so any help would be greatly appreciated! Here is the code:
**************************************************************
<body>
<div id="container">
<div id="logobox"><img src="Images/handlogo2.png" alt="Laura Ring" /></div>
<div class="nav" id="banner"></div>
<div id="mainbg">
<div id="leftCol"></div>
<div id="rightCol">Content for id "rightCol" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
**********************************************************
And the css:
body {
padding: 0;
margin: 0;
background-position: top;
text-align: center;
}
#container #banner {
z-index: 1;
clear: both;
float: left;
}
#container {
text-align: left;
padding: 0px;
float: none;
z-index: 2;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
}
#container #mainbg {
z-index: 3;
background-position: left top;
float: left;
clear: both;
}
#container #rightCol {
z-index: 4;
float: right;
clear: both;
}
#container #leftCol {
z-index: 5;
float: left;
}
#container #logobox {
float: left;
z-index: 6;
clear: left;
}
#container #footer{
clear: both;
float: left;
background-position: left top;
}
Depending on what you have planned for this page, I wouldn’t set the body to have a center text-align.
#container: You really don’t need to declare anything for float unless it is going to float left or right. Same with text-align set to left (however I know this is set because body is currently set to center). Also unless you plan on setting a width there is no need for the left and right auto margins (when width is set with auto left and right margins the div centers in the parent container). And the way you currently have it laid out…There is no need to use the z-index (this goes for the rest of the divs)
But like I said you may have something planned to have them set up as such.
[edited by: CSS_Kidd at 5:25 pm (utc) on May 26, 2009]
<!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" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background-position: top;
text-align: center;
}#container #banner {
z-index: 1;
float: left;
}#container {
text-align: left;
padding: 0px;
float: none;
z-index: 2;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
}#container #mainbg {
z-index: 3;
background-position: left top;
clear: both;
}#container #rightCol {
z-index: 4;
float: right;
}#container #leftCol {
z-index: 5;
float: left;
}#container #logobox {
float: left;
z-index: 6;
clear: left;
}#container #footer{
clear: both;
float: left;
background-position: left top;
}
</style>
</head>
<body>
<div id="container">
<div id="logobox"><img src="Images/handlogo2.png" alt="Laura Ring" /></div>
<div class="nav" id="banner">Banner</div>
<div id="mainbg">
<div id="leftCol">Left-Column</div>
<div id="rightCol">Content for id "rightCol" Goes Here</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
