CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ferenc Deak
Ferenc Deak

Reputation: 35408

CSS help request for DIV placement and scrolling

I am trying to emulate a 4 framed page with divs, but I have encountered some problems I cannot resolve ... Here is a quick sketch:

Four framed divs

Here is the CSS I use to style the DIVs:

#wrapper {
     width: 100%;
     height: 90%;
     margin: 0 auto;
}
#leftpane, #rightpane {
    border: 1px solid black;
    float: left;
    color: white;
    background-color: white;
    height: 90%;
    top: 5%;

}
#leftpane {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%; 
}
#rightpane {
    position: absolute;
    left: 50%;
    bottom: 0;
    right: 0; 
}
#topmenu
{
   position:fixed;
   top:0px;
   height:5%;
   background-color: gray;
}
#footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

and here are the DIVs I create:

<div id="wrapper">
    <div id="topmenu"></div>
    <div id="leftpane"></div>
    <div id="rightpane"></div>
</div>
<div id="footer"></div>

The content of the DIV is set via an AJAX call and what in fact happens is that the entire page just scrolls ... all the DIVS, all the text :(

I'd like the following behaviour: The Left and Right divs are scrollable independently from each other and the Top menu and the Footer stay there regardless of what is in the left/right panes and how much text is in them (right now the left/right pane content overwrites the footer DIV if there is too much text :( ).

(Yes, before the DIVs I had a page design with frames there this was working perfectly (as expected :) ), but due to some feature request we needed to switch to this DIV'd design. And please be indulgent about this beginner level question :) ... I am just learning CSS, javascript and WEB programming :) )

Upvotes: 0

Views: 80

Answers (4)

Nishan Senevirathna
Nishan Senevirathna

Reputation: 719

Can't you use something like this?

<html lang="us">
<head>
    <style type="text/css">
        .header{
            height:10%;
            background:#AE2E2E;
        }
        .middle{
            height:80%;
        }
        .left{
            height:100%;
            scroll:auto;
            background:#C7C7E0;
            float:left;
            overflow: auto;
            width:50%;
        }
        .right{
            height:100%;
            scroll:auto;
            background:#BDB1B9;
            float:left;
            overflow: auto;
            width:50%;

        }
        .footer{
            height:10%;
            background:#C2EFC2;
        }
    </style>

</head>
<body>
    <div class="header" ></div>
    <div class="middle" >
        <div class="left" ></div>
        <div class="right" ></div>
    </div>
    <div class="footer" ></div>
</body>

Upvotes: 0

David
David

Reputation: 4873

Simple enough. I added colors so you can see the different boxes. You'll noticed I had to add a few things to make them visible, like height. The main thing you need though is the overflow-y:auto Also the z-index on the header is important otherwise it will get covered when either of the sides scrolls.

body {
  margin: 0;
  padding: 0;
}
#leftpane,
#rightpane {
  position: absolute;
  border: 1px solid black;
  float: left;
  color: white;
  background-color: white;
  top: 5%;
  bottom: 5%;
  overflow-y: auto;
}
#leftpane {
  left: 0;
  right:50%;
  background: green;
}
#rightpane {
  left:50%;
  right: 0;
  background: blue;
}
#topmenu {
  position: fixed;
  top: 0;
  height: 5%;
  width: 100%;
  background: red;
  z-index: 99;
}
#footer {
  position: fixed;
  bottom: 0;
  height: 5%;
  width: 100%;
  background: orange;
}

Upvotes: 2

Der Vampyr
Der Vampyr

Reputation: 951

I made a FIDDLE for you.

I added some height values und an overflow-y: scroll;

#wrapper {
 width: 100%;
 height: 90%;
 margin: 0 auto;
}
#leftpane, #rightpane {
 border: 1px solid black;
 float: left;
 color: white;
 background-color: green;
 height: 90%;
 top: 5%;
 overflow: hidden;
 overflow-y: scroll;
}
#leftpane {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 50%; 
}
#rightpane {
 position: absolute;
 left: 50%;
 bottom: 0;
 right: 0; 
}
#topmenu {
 position:fixed;
 top:0px;
 height:5%;
 background-color: gray;
 width: 100%;
}
#footer {
 position: fixed;
 bottom: 0;
 left: 0;
 height: 5%;
 width: 100%;
 background-color: blue;
}

Upvotes: 1

Muhammad Bilal
Muhammad Bilal

Reputation: 2134

Try adding:

overflow-y:scroll;

in #leftpane, #rightpane

Upvotes: 3

Related Questions