Posted by: Stripes Oct 16 2010, 03:47 PM
Hey guys and gals, I am trying to center my div layers at the moment. Currently I have the header, navbar, and footer centered properly with margin commands. But in the center, I have two div layers side by side...floating left, and they don't center out. What am I missing or doing wrong here?
Here's the Code
CODE
<style type="text/css">
#header {
position:relative;
margin:0 auto;
width:900px;
height:140px;
z-index:1;
background-image: url(images/header_streaks.png);
}
#navbar {
position:relative;
margin:0 auto;
width:900px;
height:40px;
z-index:2;
background-image: url(images/navbar%20copy.png);
}
#sidebar {
position:relative;
float:left;
margin:0 auto;
width:200px;
z-index:3;
height: 600px;
background-color: #FF00FF;
}
#content {
position:relative;
float:left;
margin:0 auto;
width:700px;
height:600px;
z-index:4;
background-color: #0000FF;
}
#footer {
position:relative;
margin:0 auto;
width:900px;
height:50px;
z-index:5;
background-color: #99FF00;
clear: both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="navbar"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
And that all looks like this
Posted by: wgabrie Oct 16 2010, 06:28 PM
You can't center the left-floated content using margin on the floated elements. The float just pushes everything to the left side of the browser window. You need to put a wrapper, with a centering margin style, around the floated elements if you want to center them.