"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/>