CSS problem: Content wider than the background

I’ve come across the following problem a few times recently…

<body>
    <div class="background">
        <div class="content">
            Content here...
        </div>
    </div>
</body>

With CSS similar to this:

.background
{
    background: url(bg.jpg);
    width: 100%;
}

.content
{
    width: 750px;
}

The important point here is that the “background” div has a percentage width, and the “content” div has a fixed width. The problem with this is that when the page is viewed on a monitor smaller than the width of the content div (750px here), the content scrolls horizontally, but the background div does not extend to fit. [Example]

The fix here is quite simple – make sure the background is at least as wide as the content:

.background
{
    background: url(bg.jpg);
    min-width: 750px;
    width: 100%;
}

.content
{
    width: 750px;
}

[Example]

(Of course IE6 doesn’t support min-width, but that’s another problem!)

CSS problem: Content wider than the background

Add a Comment