ansaurus

Question

How do I get a "central column" effect without a background image?

Answer 1

A:

body { 
    text-align: center; 
    margin: 5em 0 0 0; 
    vertical-align: middle; 
}

#content { 
    width: 760px; 
    text-align: left; 
    margin: 0 auto; 
}

Details here.

Dave Swersky 2009-02-28 20:32:48

This isn't really what Paul is asking. He wants the column to cover the entire height of the page. This just covers the width and centering part of it which he already has.

Welbog 2009-02-28 20:38:51

Answer 2

+3 A:

The solution is to use a wrapper div that has 100% height and a separate content div that will extend if the content inside is long enough both having the background color set. Here is an example (tested in Firefox, Chrome and IE7):

<html>
    <head>
        <style type="text/css">
            html {height: 100%}
            body {
                height: 100%; 
                margin: 0; 
                text-align: center;//for IE7
            }
            div#wrapper { 
                background-color: #efefef;
                width: 720px;
                margin: 0 auto;
                height: 100%;
                text-align: left;
            }
            div#content {
                background-color: #efefef;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div style="height: 2000px">test</div>
            </div>
        </div>
    </body>
</html>

Aleris 2009-02-28 21:00:32

That's close to what I want, however the color (#efefef) doesn't quite extend to the top of the window, and when scrolled to the bottom, doesn't quite touch the bottom of the window either in some cases.

Paul Williams 2009-03-01 17:54:52

Does for me, under what condition does the div not extend to the full height of the viewport? Also: If you use a correct doctype to force IE in to standards mode, you don't need the text-align:center; text-align:left; malarky.

garrow 2009-03-02 10:46:15

make sure the body AND html have no padding/margins aswell

sanchothefat 2009-03-02 11:17:54

I did some fiddling in my markup and figured out what my problem was. The last <p> element on my page had a margin on the bottom.It works great now, thanks.

Paul Williams 2009-03-11 23:23:02

ansaurus

tags:

views:

answers:

How do I get a "central column" effect without a background image?

related questions