CODEWITHSUNDEEP
htmlcss
Paul Williams
Paul Williams

Reputation: 617

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

I am designing a website layout in which all of the content is held in a central column of a fixed width. I want this central column to have a different background color than the rest of the page. I also want the central column to extend from the very top of the browser to the very bottom.

I am able to successfully do this using a background image of dimensions 1000x1, as follows:

 html
{
    background: #333333 url(./images/global/background.png) repeat-y center;
}

body
{
    margin: auto;
    width: 1000px;
}

This works great in most browsers, but I would really prefer to be able to do it without an image.

I have tried setting "html" and "body" to have a "height: 100%" and then giving "body" a background color, but if there is enough content to warrant scrolling, the background only has a height equal to that of the browser and when you scroll down, the background stays behind.

Any tips are appreciated.

Upvotes: 1

Views: 2149

Answers (2)

Dave Swersky
Dave Swersky

Reputation: 34810

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

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

Details here.

Upvotes: 0

Aleris
Aleris

Reputation: 8059

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>

Upvotes: 4

Related Questions