Centering Floating Div Layers

Welcome Guest ( Log In | Register )

Centering Floating Div Layers

Options

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