Home/ Questions/Q 8685871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:41:15+00:00

I have created a three-column background type thing, as I previously described in my

  • 0

I have created a three-column background type thing, as I previously described in my first question: How to create a three-column website background using CSS?. Anyways, I have it working mostly successfully like so:

I have a div with id centercolumn, containing all my page’s content (header, content, footer, etc.):

<html>
    <body>
        <div id="centercolumn">
            <!-- content -->
        </div>
    </body>
</html>

Then, in CSS, I have the following settings (only showing the relevant code):

body {
    background-image: url('theimagetobetiledalongthesides.png');
}

#centercolumn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin-left: auto;
    margin-right: auto;

    width: 760px;

    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}

Essentially, the body provides the background for the whole page, then the centercolumn div goes on top of that and stretches all the way down the page, and has a different background image. This gives the appearance of having three columns: one in the middle for content, and two on the sides.

I believe the issue I’m having is with the overflow property of the centercolumn div. On any browser I’ve tested with (Chrome, Firefox, IE, Opera, and Safari), the center column initially goes all the way to the bottom of the page (as it should). When I vertically resize the page, making it smaller/shorter, once I reach the actual content (which is text), a scrollbar appears on the side of the page/browser (as it normally would). However, when I scroll down to see the rest of the content, it’s as though the centercolumn div doesn’t go all the way down: the different background image of the centercolumn stops part way down (exactly where the bottom of the browser was before I scrolled back down). My text runs out of the centercolumn background image, and on to the background image of the body.

When I set the overflow on the centercolumn div to be scroll and start resizing the page, it works fine (the div seems to go all the way down – the centercolumn background image doesn’t cut off), but it creates a rather ugly effect where the scroll bar actually appears on the side of the middle content column rather than the side of the browser.

What can I do to get the middle content column’s different background image to go all the way down, without causing a scrollbar to appear on the side of the middle column as I vertically resize the browser window?

edit: JSFiddle example at http://jsfiddle.net/dDfkC/1/.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using position:absolute, which is wrong, you want to use relative positioning then margin:0 auto; to center this column.

    What you need to do is set it

    #centercolumn {
    position:relative;
    margin: 0 auto;
    width:760px;
    background-image: url(whatever);
    background-repeat: both;
}

    And if you want it to expand to the bottom of the page, no matter how little content you have:

    body, html {
    height:100%;
}

    and add to above

    #centercolumn {
    min-height: 100%;
}

    and a real basic CSS Reset:

    * {
    margin:0;
    padding:0;
}
    • 0