SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript / CSS question all in one

    What I need to do is center a container div in my page, no matter what the width of the page is. The container will always be 800px wide and then as the page grows wider, there will be a left and right outside column which will also grow wider.

    Here is my html
    Code:
    <div id="container">
    <img id="header" src="header.jpg" />
    <div id="navbar"><div class="foottext">LLRC > Home</div></div>
    <div id="middle">
     <div id="left">
     <div id="navList">
     <li><a href="">Chez Nous</a></li>
     <li><a href="">Vistas</a></li>
     <li><a href="">Other Book</a></li>
     <li><a href="">CSS Design</a></li>
     </div>
     </div>
     <div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
     <div id="right"><br /><br /><br /><br /><br /><br /></div>
    </div>
    <div id="footer"><div class="foottext"> 2003 Saint Michael's College</div></div>
    </div>
    Here's the css
    Code:
    BODY{  /* Takes margins and padding out of page */
    margin:0;
    padding:0;
    color:#000;
    height:100%;
    background:url('bgmain.gif');
    font-family:'Trebuchet MS', Trebuchet, Verdana, Helvetica, sans-serif;
    }
    #container{   /* Wrapper for all divs on page */
    position:absolute;
    width:800px;
    top:0;
    }
    img#header {   /* Formats the header on top of page */
    position:relative;
    left:0;
    top:0;
    height:150px;
    width:100%;
    border:0px;
    }
    #navbar{
    position:relative;
    left:0px;
    top:-4px;
    width:100%;
    height:20px;
    background-color:#333;
    }
    #middle {
    position:relative;
    left:0;
    top:-4px;
    width:100%;
    background-color:#300;
    }
    #left {
    position:absolute;
    top:0;
    left:0;
    width:20%;
    background-color:#300;
    }
    #content {
    position:relative;
    top:0;
    left:20%;
    width:60%;
    background-color:#030;
    }
    #right{
    position:absolute;
    top:0;
    left:80%;
    width:20%;
    background-color:#300;
    }
    #footer {
    position:relative;
    left:0;
    top:-4px;
    width:100%;
    height:20px;
    text-align:right;
    background-color:#333;
    }
    Thanks,
    Keith
    Keith Rousseau

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	   "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Center div?</title>
      <style type="text/css">
    #container { 
      width: 500px; 
      margin: 0 auto; 
      background-color: red;
    } 
    </style>
     </head>
     <body>
    <div id="container">
    content content content content content content content content
    content content content content content content content content
    </div>
     </body>
    </html>
    Bear in mind that this only works in IE6 if the doctype is present, since for some unfathomable reason, IE6 only handles margin: auto; if you trigger its "standards-compliant" rendering mode.

    IE5.5 and lower are probably going to drop it on the floor, but Mozilla and Opera handle it just fine, with or without the doctype.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •