Board index » Web Programming » CSS Help on making Div BGcolor across entire page when scroll bar appears

Quote

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;

}