CSS Help on making Div BGcolor across entire page when scroll bar appears

[davidr]

Hi,

I am using Divs with CSS to setup a layout for a site. I am using the
<Div>s and style sheets below. I want the TopMenu to go across the
entire top of the browser. It does go across the entire top, but let
say my screen resolution is 800x600 and the "Content" Div forces scroll
bars for the user to scroll to the right to see an object then the
TopMenu doesn't go all the way across. The top menu will only go to
the screen resolution, but as soon as I scroll right and go over 600
pixels the color gets cut off. If I specify the width: 100%; or leave
it alone it does the same thing. If I set my screen resolution to 1024
x 768 the Top Menu goes across the entire top perfectly. Since there
is no scroll bar it won't be a problem.
My last question is for the leftPanel how can I make the bgcolor travel
all the way down 100% the height of the browser at all times with a
width of 155px? I have tried setting its height to 100% and that
doesn't work. If I set it to some real high # to like Height: 1000px
it does go all the way down, but I want it to be universial to were it
flows with the height of the browser and if a height scroll bars
appears it will travel down with it to however far it needs to go.

thanks,

David

<form id="form1" runat="server">
<div id="MainDiv">
<div id="TopMenu">
</div>
<div id="LeftPanel">
</div>
<div id="Content">
<IN HERE SOME CONTROL THAT IS MORE THAN 600 PIXELS>
</div>
<div id="rightContent">
</div>

</div>
</form>

CSS Files:
ody
{
margin: 0px;
}

#MainDiv
{

}
#TopMenu
{
height: 20px;
background-color: #a7cfe8;
}

#LeftPanel
{
background-color: #a7cfe8;
position: absolute;
width: 155px;
height: 100%;
top: 20px;
left: 0px;
}

#Content
{
margin-left: 156px;
padding-left: 10px;
padding-top: 10px;
}

#rightContent
{
position: absolute;
right: 0px;
top: 20px;
width: 5px;
}

[bruce barker \(sqlwork.com\)]

using height=100%, require that the object be inside some content with an
absolute heigth specified. in your case its ignored, and the height is the
content height. you aslo do not set the widths of the content divs, so they
are the size of their content.

you could use client script to set all the sizes correct.

-- bruce (sqlwork.com)
<da****@sharpesoft.comwrote in message
news:11**********************@b28g2000cwb.googlegr oups.com...

Hi,

I am using Divs with CSS to setup a layout for a site. I am using the
<Div>s and style sheets below. I want the TopMenu to go across the
entire top of the browser. It does go across the entire top, but let
say my screen resolution is 800x600 and the "Content" Div forces scroll
bars for the user to scroll to the right to see an object then the
TopMenu doesn't go all the way across. The top menu will only go to
the screen resolution, but as soon as I scroll right and go over 600
pixels the color gets cut off. If I specify the width: 100%; or leave
it alone it does the same thing. If I set my screen resolution to 1024
x 768 the Top Menu goes across the entire top perfectly. Since there
is no scroll bar it won't be a problem.
My last question is for the leftPanel how can I make the bgcolor travel
all the way down 100% the height of the browser at all times with a
width of 155px? I have tried setting its height to 100% and that
doesn't work. If I set it to some real high # to like Height: 1000px
it does go all the way down, but I want it to be universial to were it
flows with the height of the browser and if a height scroll bars
appears it will travel down with it to however far it needs to go.

thanks,

David

<form id="form1" runat="server">
<div id="MainDiv">
<div id="TopMenu">
</div>
<div id="LeftPanel">
</div>
<div id="Content">
<IN HERE SOME CONTROL THAT IS MORE THAN 600 PIXELS>
</div>
<div id="rightContent">
</div>

</div>
</form>

CSS Files:
ody
{
margin: 0px;
}

#MainDiv
{

}
#TopMenu
{
height: 20px;
background-color: #a7cfe8;
}

#LeftPanel
{
background-color: #a7cfe8;
position: absolute;
width: 155px;
height: 100%;
top: 20px;
left: 0px;
}

#Content
{
margin-left: 156px;
padding-left: 10px;
padding-top: 10px;
}

#rightContent
{
position: absolute;
right: 0px;
top: 20px;
width: 5px;
}