CSS: 3 Column Layout with Liquid Center

1

I was trying to make heads and tails of this earlier, and yes I have plundered around the interwebs finding documentation on it. However, I wouldn’t be posting here, if I had found anything helpful. Some solutions I tried implementing, but the effects are undesirable.

As I have been discovering, I am trying to tackle a far bigger animal than I presumed it to be. So maybe I’m not out of line asking for some assistance on this one.

Here is the directory to my page. Check the page out. Check the CSS. And save the .php file so you can possibly edit if you need to.

http://www.wku.edu/~markanthony.echipare/5.0

Code pasted below.

My goal for the page was to have a page that stays at least 800px wide and at most 1024px wide. The height would be determined by the Main Content Area and is free to go as far as needed to fit the Content. However, I decided on a 3 column layout with a liquid center. I would later find out this layout is referred to as the “Holy Grail” of web layouts, and now I am in over my head it seems.

Basically I have it set up the way I want it. I just need the Right Side Area top aligned with the rest of the Content Area. And then after that the Content Area will be as high as the highest of the three columns within it. It seemed simple to do at first, but the way the semantics are dictating, things aren’t going as planned.

Any clean, non-exploitive suggestion?

I have seen solutions that claim being hackless, but they beg the question.

CSS file:



body
{
    margin: 0 0 10px 0;
    
    font-family: Franklin Gothic Book;    
    color: #AAAAAA;
    font-size: 14px;
}

a
{
    text-decoration: none;
}

#clear_floats
{
    clear: both;
}

#global
{
    width: auto;
        min-width: 800px;
        max-width: 1024px;    
    height: 100%;
    
    margin: auto;
    
    border: solid #CCCCCC;
        border-width: 0 1px 1px 1px;
}

#logo
{
    float: left;
    
    width: 120px;
    height: 120px;
    
    background-image:url(5.0_Logo.png);
}

#header
{    
    width: auto;
    height: 120px;
    
    margin: 0 10px 0 10px;    
    
    font-family: Franklin Gothic Book;
    color: #FFFFFF;
    
    background-image:url(5.0_Header_BG.png);
    
    border: solid black;
        border-width: 0 1px;
}

#navigation
{
    position: relative;
        top: 73px;
    
    float: left;

    width: auto;    
    height: 47px;
    
    background-image:url(5.0_Header_Navigation_BG.png);
}

#navigation_corner
{
    position: relative;    
        top: 73px;
    
    float:left;
    
    width: 42px;
    height: 47px;
    
    background-image:url(5.0_Header_Navigation_Corner.png);
}

#navigation_item
{
    position: relative;
        top: 15px;
        
    float: left;
    
    padding: 5px 15px;
    
    border: 0px dashed #DDDDDD;
}

div#navigation a
{
    color: #FFFFFF;
}

#content
{
    width: 100%;
    height: auto;
    
    margin-top: 20px;
    
    border: 1px solid #00FF00;
}

#left_side
{
    float: left;

    width: 148px;
    height: auto;

    padding: 0 2px;

    text-align: left;
    
    border: 1px dashed #FFAA00;
}

#middle
{    
    width: auto;    
    height: 100%;
        min-height: 460px;
    
    margin: 0 164px;
    
    text-align: justify;
    
    border: 1px solid #0000FF;
}

#right_side
{
    float: right;
    
    width: 148px;
    height: auto;

    padding: 0 2px;

    text-align: left;
    
    border: 1px dashed #FFAA00;
}

PHP file:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="5.0_CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="global">


<div id="header">    
    
    <div id="logo"></div>

    <div id="navigation">
    
        <div id="navigation_item"><a href="#">Home</a></div>
        <div id="navigation_item"><a href="#">Do's and Don'ts</a></div>
        <div id="navigation_item"><a href="#">News</a></div>
        <div id="navigation_item"><a href="#">FAQ</a></div>
        <div id="navigation_item"><a href="#">About Us</a></div>
        <div id="navigation_item"><a href="#">Email Us</a></div>
        <div id="clear_floats"></div>
    
    </div> <div id="navigation_corner"></div>
    <div id="clear_floats"></div>

</div>

<div id="content">
    
    

    <div id="left_side">Stiff Left Side Area: <br>Expandable and collaspable site map navigation. &nbsp;Shows parent pages and their children. &nbsp;Highlights exactly where you are in the map, and if you are in a child page, the parent page is expanded unless you collapse the parent and hide the child listings, then which the parent is just highlighted until expanded again. &nbsp;Expansion of other parents is also allowed. &nbsp;Throughout navigation of site, Site Map will maintain opened and closed states until user exits site, but as they navigate the highlighted area will change.</div>

<div id="middle">Elastic Middle Content: <br>Will be the most likely area to cause the page to have to scroll, Site Map maybe, but this would be the main cause.</div>
    
    <div id="right_side">Stiff Right Side Area: <br>Reserved for stickied important links, like our Sponsor Department and University Homepage. &nbsp;Provides a quick listing of links on the current page being viewed. &nbsp;Random linking icons, chosen in random order, but never repeating, for the remainder of area up to a limit of 7 icons.</div>
    
    <div id="clear_floats"></div>

</div>

</div>

</body>



</html>