Home/ Questions/Q 134655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T06:39:10+00:00

I am designing a website layout in which all of the content is held

  • 0

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 1000×1, 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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>
    • 0