The Impossible Layout?

Question

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

Answer 1

It might be worth considering using some javascript to help with your layout problems. Whilst I know this isn't ideal, it is a solution I have used successfully before when trying to deal with full-height layouts.

It should be ok to get the layout you describe without the full height scrolling columns then just use a little bit of javascript to keep them filling the height of the browser

Answer 2

I believe this is fairly easy to do if you have the luxury of using the ext.js framework. Will update with code if no one else offers a better answer and if you're interested.

Update: Here's the code. Tested and works nicely with even IE6. Drawback compared to css-only solution is (i) require JavaScript (mostly likely the app already uses JS); (ii) Ext.js requirement (which might or might not be too feasible):

Notice the usage of style="height: 100px;" int html and autoScroll: true in the JavaScript code. This allows for the fixed height of the top 2 panels and overflow with scrollbars in the bottom twos.

Ext.onReady(function(){

   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   var viewport = new Ext.Viewport({
        layout: 'border',
        resizable: false,
        items: [
            {
                region: 'west',
                id: 'west-panel',                    
                split: false,
                width: 300,                                        
                margins: '0 0 0 0',
                layout: 'border',                    
                items: [{
                    region: 'north',
                    contentEl: 'west1',                                            
                    border: false
                },{
                    region: 'center',
                    contentEl: 'west2',                        
                    border:false,
                    autoScroll: true
                }]
            },
            {
                region:'center',
                id:'center-panel',                    
                split:false,                    
                margins:'0 0 0 0',
                layout:'border',                    
                items: [{
                    region: 'north',
                    contentEl: 'center1',                        
                    border:false
                },{
                    region: 'center',
                    contentEl: 'center2',                        
                    border:false,
                    autoScroll: true
                }]
            }                                
         ]
    });        
});

and the html:

<div id="west1" style="height: 70px;background-color: #AAA;">
    <p>Hi. I'm fixed.</p>
</div>
<div id="west2">
    <p> long content goes here</p>
</div>
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;">
    <p>Hi. I'm fixed too.</p>               
</div>
<div id="center2">        
<p> long content goes here</p>
</div>

Demo will be available later, again, if you or anyone is interested. Please indicate so if you could.

Answer 3

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"&gt;

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

Answer 4

You'll get there with faux columns.

You can use that technique to make the two vertical separations.
If you want separate scrollbars (please don't, you'll make usability kitten cry) you can make each of the vertical separations have max-height: 100%; overflow: auto; to make them get scroll if they reach 100% height.

For the "floating-top" blue bars, you can give the parent separation position: relative; padding-top: 150px;, and then give the blue bar position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden;. (I'm not sure about the 100% width.)
Then the green and yellow content will not overlap it.