Centering Floating Div Layers |
Centering Floating Div Layers |
Stripes |
Oct 16 2010, 03:47 PM
Post
#1
|
Newbie Group: Members Posts: 15 Joined: 11-September 10 Member No.: 12,708 |
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 |
wgabrie |
Oct 16 2010, 06:28 PM
Post
#2
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
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.
This post has been edited by wgabrie: Oct 16 2010, 06:30 PM |
Lo-Fi Version | Time is now: 18th April 2024 - 09:31 PM |