ansaurus

Question

Banner 100% width extends to window size, but not document size

Answer 1

+3 A:

Try putting the header inside the content div. Like this:

...
</head>

<div id="content">
    <div id="header"></div>
    <h1>TEST</h1>
</div>

</html>

Even better, add a wrapper:

<html>
<head>
    <style>

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

        #wrapper {
            width:1500px;    
        }

        #header{
            height:80px;
            background-color:blue;
            width:100%;
        }

        #content{
            width:100%;
            background-color:red;
        }

    </style>
</head>

<div id="wrapper">
    <div id="header"></div>
    <div id="content"><h1>TEST</h1></div>
</div>

</html>

Byron Sommardahl 2010-07-22 17:18:54

Answer 2

A:

Setting a min-width on your #header that equals the #content width would do it:

#header{
    height:80px;
    background-color:blue;
    width:100%;
    min-width: 1500px;
}

Pat 2010-07-22 17:23:44

Answer 3

A:

put a

<div id="wrapper"> header & content </div>

around everything... make wrapper position:relative, so 100% header is the width of the wrapper, which will be whatever content is.

vinhboy 2010-07-22 17:38:23

ansaurus

tags:

views:

answers:

Banner 100% width extends to window size, but not document size

related questions