ansaurus

Question

How can I make background of a div span over the entire page

Answer 1

+1 A:

I'm not sure what it is your looking for. Is it something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <style>
            .outerDiv { width:100%; background:#DEDEDE; }
            .innerDiv { width:950px; margin:0 auto; border:solid 2px #000000; }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <div class="innerDiv">
                This is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test.
            </div>
        </div>
    </body>
</html>

S.Jones 2010-08-29 17:12:29

I've replaced "text-align:center;" in outerDiv with "margin:0 auto;" in innerDiv as per Pat's.

S.Jones 2010-08-29 18:31:29

Here's a "snapshot" of the page I'm working on. Hopefully you can understand my dilemma better. I might just redo most of the html structure cause it's kinda fucked up right now. http://tempohi.byethost14.com/Been almost half a year since I worked with HTML and CSS last so I've forgotten a lot.

Hultner 2010-08-29 19:32:59

Answer 2

A:

You could use one of these techniques in this answer to get the 100% width background image. Then to center your content div, you only need something like this:

<div style="margin: 0 auto; width: 950px;">
    Your content goes right m'ere
</div>

What the above does is create a 950px wide div with 0px of margin on top and bottom and auto margins on left and right. This centers the block level element in its parent according to the W3C visual formatting model:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

Pat 2010-08-29 17:22:42

@Pat You're right, the "margin: 0 auto;" is a better way to do it. I've amended my answer accordingly.

S.Jones 2010-08-29 18:27:37

Not a problem. The thing to remember with it is that the element should have a defined width and it doesn't work in IE5 (for that you need to put it in a parent container with `text-align: center`).

Pat 2010-08-29 18:42:34

ansaurus

tags:

views:

answers:

How can I make background of a div span over the entire page

related questions