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

Discussion in 'ASP .Net' started by davidr@sharpesoft.com, Aug 4, 2006.

  1. Guest

    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;
    }
    , Aug 4, 2006
    #1
    1. Advertising

  2. 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)


    <> wrote in message
    news:...
    > 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\), Aug 4, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. George
    Replies:
    4
    Views:
    502
    George
    Feb 13, 2004
  2. Matt
    Replies:
    0
    Views:
    3,543
  3. Replies:
    6
    Views:
    939
    Peter Flynn
    Jul 3, 2006
  4. UJ
    Replies:
    1
    Views:
    568
    John Timney \(MVP\)
    Nov 1, 2006
  5. isaac2004

    making a scroll bar

    isaac2004, Feb 28, 2007, in forum: Javascript
    Replies:
    6
    Views:
    95
    Randy Webb
    Feb 28, 2007
Loading...

Share This Page