ansaurus

Question

Answer 1

A:

The easiest way to do this is with absolute positioning:

#left
{
    width:150px;
}

#center
{
    left:150px;
    right:150px;
}

#right
{
    right:0px;
    width:150px;
}

Note that the parent of all the boxes must have position:relative, as absolute positioning is relative to the first position:relative ancestor (or body if there isn't one...or actually maybe html. I'm not sure. The browser window, at least). There are reasons not to use absolute positioning, though, so this may not work in your particular case. For example, the columns will not all be equal height (unless you explicitly bind the height), so if you want different backgrounds on the columns this will probably not look right. Also, cross-browser compatibility is definitely an issue.

Ian Henry 2010-09-15 23:17:46

Answer 2

+2 A:

I believe what you're describing is known as the "Holy Grail layout" (for good reason!) See http://www.alistapart.com/articles/holygrail for a good article on it or google "CSS Holy Grail Layout" for more.

Evgeny 2010-09-15 23:17:49

Reading it now. Definitely look like the answer to my problem. Thanks +1

Harry Pham 2010-09-15 23:29:13

This is ideal if you want the height to scale with your content and a single page-level scroller. The solution I provided is more ideal if you would like your three areas to always be full screen with individual scrollers in each block.

David 2010-09-16 00:35:18

I see. Thank you so much. I will definitely keep that in mind.

Harry Pham 2010-09-16 17:02:30

Answer 3

+1 A:

This solution will work in all standard browsers (IE7 and later, firefox, chrome, opera, safari). (If you must have IE6 support, I can provide a updated example)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
 <title>Example</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#MainContainerPanel
{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
}
#LeftPanel
{
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    width:150px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:red; /*to clarify layout is working*/
}
#CenterPanel
{
    position:absolute;
    left:160px;
    right:160px;
    top:0px;
    bottom:0px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:green; /*to clarify layout is working*/
}
#RightPanel
{
    position:absolute;
    right:0px;
    top:0px;
    bottom:0px;
    width:150px;
    overflow:auto; /* change to hidden if you dont want scrolling */
    background-color:blue; /*to clarify layout is working*/
}

</style>
</head>
<body>
    <div id="MainContainerPanel">
        <div id="LeftPanel">This is the left panel</div>
        <div id="CenterPanel">This is the center panel</div>
        <div id="RightPanel">This is the right panel</div>
    </div>  
</body>
</html>

David 2010-09-15 23:45:58

ansaurus

tags:

views:

answers:

Implementing 3 blocks with CSS

related questions