Background of a DIV Element

Stephan Koser

Hi,

I have a problem with the background of a div-layer.
A page consists of two div-layers (TOP and MAIN). TOP is a menu-bar and MAIN
holds the content.
It may be, that MAIN has a width of 1000px (the width differs). TOP has a
background (no matter if it is a color or an image). When the browser has a
width of 600px all seems to be fine. Since MAIN is 1000px I can scroll
horizontally. When I scroll rightwards the header that comes in sight has no
background.

Here is a small sample:

<html>
<head>
</head>
<body>
<div id="TOP" style="width:100%;height:60px;margin:0px;border-bottom:1px
solid black;background-color:red;">
This is the Header
</div>
<div id="MAIN" style="width:1000;height:100%">
The content
</div>
</body>
</html>

When you size your browser to 800px and open this page you'll see that if
you scroll to the right the red header ends at a width of about 800px.

What can I do to make the header has a red background over the whole width.
It makes no sense to replace the 100% by 1000 because the width of MAIN
differs.

--
bye Stephan...

Steve Pugh

"Stephan Koser" <no************@web.de> wrote:

I have a problem with the background of a div-layer.
A page consists of two div-layers (TOP and MAIN). TOP is a menu-bar and MAIN
holds the content.
It may be, that MAIN has a width of 1000px (the width differs). TOP has a
background (no matter if it is a color or an image). When the browser has a
width of 600px all seems to be fine. Since MAIN is 1000px I can scroll
horizontally. When I scroll rightwards the header that comes in sight has no
background.

<div id="TOP" style="width:100%;height:60px;margin:0px;border-bottom:1px
solid black;background-color:red;">
This is the Header
</div>
<div id="MAIN" style="width:1000;height:100%">
That should be 1000px not 1000. Units must always be included for
non-zero lengths in CSS.
The content
</div>
</body>
</html>

When you size your browser to 800px and open this page you'll see that if
you scroll to the right the red header ends at a width of about 800px.

What can I do to make the header has a red background over the whole width.
It makes no sense to replace the 100% by 1000 because the width of MAIN
differs.

Put the header inside the main div.

<div id="MAIN" style="width:1000px; height:100%">
<div id="TOP" style="width:100%; height:60px; margin:0px;
border-bottom:1px solid black; background-color:red;">
This is the Header
</div>
The content
</div>

Now 100% refers to the width of the main div rather than to the width
of the browser window.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Barbara de Zoete

Stephan Koser wrote:

It may be, that MAIN has a width of 1000px

? How come? Please Google for 'Liquid Design' and see why this is
generaly a bad idea.
Here is a small sample:

<body>
<div id="TOP" style="width:100%;height:60px;margin:0px;border-bottom:1px solid black;background-color:red;">
This is the Header
</div>
<div id="MAIN" style="width:1000;height:100%">
The content
</div>
</body>

If you _must_, which I doubt, style the body a 1000px (don't forget the
px) wide and the 100% will be a 100% of that or put the div id="top"
inside the main div, with the same result.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

Background of a DIV Element

This discussion thread is closed

Similar topics