CSS Forum

**Shadrach** · 01-12-2009, 10:28 AM

Hunter's Friend - This site was done using a table and percentages for width for the layout. Notice how it doesn't matter what screen size you have, the site always takes up the whole screen. I like that.

Tackle Warehouse - As opposed to this site. The enormous white space on the right really makes the page feel unnecessarily cramped.

Does anyone know how to duplicate the layout of the first page, using CSS rather than tables?

**SolidEagle** · 01-12-2009, 10:58 AM

You could implement a wrapper div in the second site and put every code you want centered in it. In the css you have to give this wrapper a fixed width and a margin (see my example below). For IE6 you'll need another method which is the text-align:center;

Code:

<html>
    <head>
            <style>
                body{
                    text-align:center; //fix for IE6
                }
               #wrapper{
                    text-align:left; //because the IE6 fix everything is center, 
                                         //to fix this put allign left here.
                    width:900px;    // just an example width!!!
                    margin:0 auto 0 auto;  // the two auto's will center your page 
                                                   //in most browsers
               }
            </style>
    </head>
    <body>
        <div id="wrapper">
            //your site code here
        </div>
    </body>
</html>

I Hope this will help you

**Shadrach** · 11:08 AM

Neither of those sites are mine. I was just using them as examples of what I liked and didn't like.

Also, I noticed in the sticky posted about this topic that the height attribute can be set to a percentage. Does that go for width as well?

**SolidEagle** · 01-12-2009, 11:24 AM

yup that's possible.