css layout (fixed)

Question

is it possible to create master-detail-states layout in css?
I need 3 placeholders :

+---------------+-------+  
|       A       |   B   | 
+-----------------------+
|            C          |
+-----------------------+

Block A - is the list of orders .
Block B - is the list of states of selected order
Block C - is the list of details of selected order

Each block will have own vertical scrollbar, but whole page can't be scrolled - it means, that each block is always on own place, even if I have 1000 orders, 1000 details and 1000 states.

is it possible to do it with css?

Answer 1

It's actually a pretty straight-forward CSS layout:

DEMO HERE

Answer 2

This will be your HTML:

<div id="main_div">
   <div id="header">
      <div id="a" class="placeholder"></div>
      <div id="b" class="placeholder"></div>
   </div>
   <div id="c" class="placeholder"></div>
</div>

And this is what you need in your css:

#main_div {
   width:1000px;  /* you can change this */
   height:600px;  /* you can change this */
   overflow:hidden;
   overflow-y:hidden;
   overflow-x:hidden;
}

#a {
   float:left;
   width:50%   
}

#b {
   float:right;
   width:50%
}

#c {
   clear:both;
   width:100%
}

.placeholder {
   height:300px;
   max-height: 300px; /* you can change this */
   overflow:scroll;
   overflow-y:hidden;
}

Answer 3

Maybe something like this:

<style type="text/css">
  .A, .B, .C
  {
    overflow: scroll;
  }

  .A, .B
  {
    display: inline-block;
    height: 30%;
  }

  .A
  {
    width: 75%;
  }

  .B
  {
    width: 25%;
  }

  .C
  {
    width: 100%;
    height: 70%;
  }

</style>

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>

CSS isn't my strongest point though, so there may be some layout issues ;)

I hope that might help a little.

Answer 4

Going a bit on Karls answer.

You can also use this solution.

<style>
  div#scrollable {
  overflow:auto;
  height:###;
  width:###;
  }
</style>


 <div id="scrollable">
     Your divs inside here
 </div>