The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Centering Floating Div Layers
Stripes
post 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
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd April 2014 - 07:15 AM