Home/ Questions/Q 805143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:02:10+00:00

I’m beginning to think this is impossible, but thought I’d ask you guys. Basically

  • 0

I’m beginning to think this is impossible, but thought I’d ask you guys.

Basically it’s a 2 column layout, but the “business” wants the following:

-Always take up the entire browser window

-Accommodate resizing of browser window

-Left column will be fixed width, but that width should be flexible from page-to-page.

-Left column has a region at the top with fixed height.

-Left column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region.

-Right column should take up remaining horizontal space of browser window.

-Right column has a region at the top with fixed height.

-Right column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region.

I’ve tried everything…divs, floated, absolutely positioned, tables, divs in tables…

Is this even possible?

Here’s an image of what it should look like:
http://imgur.com/zk1jP.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not at all impossible, and you shouldn’t need javascript. You do need some IE6 specific hacks if you care about that browser.

    The key to the layout is the fact that you can set one or more edge positions on an absolutely positioned element. Here’s a good article on the technique: http://www.alistapart.com/articles/conflictingabsolutepositions/

    Here’s a demo: http://www.spookandpuff.com/examples/2col2section.html

    and source:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>2 col, 2 section layout.</title>

    <style type="text/css" media="screen">
     #leftColumn {
       position:absolute;
       top:10px;
       bottom:10px;
       left:10px;
       width:400px;
     }

     #rightColumn {
       position:absolute;
       top:10px;
       bottom:10px;
       right:10px;
       left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */
     }

   .topSection{
     position:absolute;
     top:10px;
     height:120px;
     left:10px;
     right:10px;
     padding:10px;
   }

  .bottomSection{
     position:absolute;
     bottom:10px;
     top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */
     left:10px;
     right:10px;
     padding:10px;
     overflow-y:auto;
   }

     /* Debug styles */
     body {background-color:#CCC;}
     div {border:1px solid #FFF;}

     #leftColumn {background-color:#7EF4B0;}
     #rightColumn {background-color:#EEF4A7;}
     #leftColumn .topSection{background-color:#56A97A;}
     #rightColumn .topSection{background-color:#D6D06D;}

    </style>

</head>

<body>
    <div id="leftColumn">
      <div class="topSection">
        <p>Left column, top section.</p>
      </div>

      <div class="bottomSection">
        <p>Left column, bottom section.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

    <div id="rightColumn">
      <div class="topSection">
        <p>Right column, top section.</p>

      </div>

      <div class="bottomSection">
        <p>Right column, bottom section.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
</body>
</html>

    There are a few tricks: First off, I only tested this in Firefox to give you the general idea – there are some needed fixes for IE which I haven’t added: check the list apart article up top for details.

    I’ve allowed 10px extra space around all the boxes just to illustrate the idea – you’d probably set these to 0 in a real layout.

    You can set the height of .topSection differently between columns with some rules like:

    #leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}

#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}

    I would use a container with a class (or a class on the body tag) to specify the width of the left column, something like:

    #container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}

    That allows you to define a set of width ‘templates’ you can switch between.

    • 0