homepage Welcome to WebmasterWorld Guest from 54.166.8.138
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering Divs
brnm98105




msg:4064003
 4:02 am on Jan 20, 2010 (gmt 0)

Hi i need some help.

There are divs in the center of my page. The header and footer are in a fixed position and are lined up perfect and stay constand even when scroling.

There are 2 center divs "sidebar" on the right and "Content on the left. How do I center them to take up 100% of the width. Right now they are on the right side and I can seem to shift them to the middle and saty even when resizing. Any help would be appreciated

Here is the Code with the CSS followning

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header &amp; Footer: Cross Browser</title>
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1><img src="../images/title.png" title="Scentsy Candles" alt="" width="370" height="88" /></h1>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>
</div>
</div>
<div id="ie6pagewrap">
<div id="ie6pagecontainer">
<div id="container">
<div id="content">
<h1>Blah Blah Blah </h1>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla </p>

</div>
<div id="sidebar">

<h2 align="center">Scentsy Consultants Wanted in</h2>
<p align="center"><script src="http://www.google.com/jsapi" type="text/javascript">
</script> <script type="text/javascript" src="../Scripts/locate.js">
</script></p>
<p align="center"><span class="largetextCopy">Start a Candle Business</span></p>
</div>
</div>
</div><!--END CONTAINER-->
</div>

<div id="footer-wrap">

<div id="footer-container">
<div id="footer">
<p class="copy">Home</a></p>
<p class="link">Sitemap</a></p>
</div>
</div>
</div>

</body>
</html>

--------------------------------------------

CSS

@charset "utf-8";
/* CSS Document */

body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #666633;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}

h1, h2 {
color: #666633;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}

#header-container {
height: 166px;
background: url(../images/h1.png) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #000000;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 30px;
top: 16px;
}

#header h1 em{
color: #FFFFFF;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 39px;
right: -12px;
}

#header ul li {
float: left;
margin-right: 5px;
padding: 10px;
font-size: 12px;
}

#header ul li a{
color: #000000;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #666666;
}

#container {
width: 940px;
font-size: 1.4em;
overflow: auto;
margin-top: 0;
margin-bottom: 0;
padding-top: 166px;
padding-right: 0px;
padding-bottom: 55px;
padding-left: 0;
margin-right: auto;
}

#content {
float: right;
width: 625px;
}

#sidebar {
float: left;
width: 275px;
margin-top: 3px;
}

#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: auto;
}

#footer-container {
background: url(../images/footer-bg.png) repeat-x left top;
height: 40px;
}

#footer {
width: 940px;
margin: 0 auto;
color: #FFFFFF;
font-size: 1.2em;
position: relative;
}

#footer a {
color: #FFFFFF;
}

#footer p.copy {
position: absolute;
top: 5px;
left: 0;
}

#footer p.link {
position: absolute;
top: 5px;
right: 0;
}

 

limbo




msg:4064096
 8:59 am on Jan 20, 2010 (gmt 0)

Try adding:

margin-left: auto; in #container

You can also combine properties like this:

margin: 0 auto; /* meaning: top/bottom = 0, left/right = auto */

:)

P.S. It'd also probably make sense to center your header and footer this way too...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved