PDA

View Full Version : CSS: 3 Column Layout with Liquid Center


BSM2049
July 30th, 2008, 04:13 PM
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 (http://www.wku.edu/%7Emarkanthony.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>
andr.in
July 31st, 2008, 07:23 AM
I've found this implementation to work pretty well

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

Basically, it uses a 100% width div for the center part and negative margins to position the side columns.
BSM2049
July 31st, 2008, 09:20 AM
It looks elegant enough. I'll try it out and see. I got it to work fine in Firefox, but it was an odd fix, and I am not too sure it is right.

What I did was place the Side Columns in a False Container that was the same size as the Content Container, and floated the columns to their respective sides within the False. I left the Middle Column just outside of this new False Container, but still in the Content, and just set it's margins equal to the Side Column widths. It seems to work for FF for some reason, but I was expecting the Middle Column to bump down since there is another container (False Container) above it, and everything is position: relative. I see this happening in IE so I am looking for a more Cross Browser friendly solution.

Here is the website again:

http://www.wku.edu/~markanthony.echipare/5.0/Index/_index.php (http://www.wku.edu/%7Emarkanthony.echipare/5.0/Index/_index.php)

If you go up a folder and leave off the /_index.php part you can get to the file and save it so you can see the code. I'll post it too though.

The new CSS:



html
{
overflow-y: scroll;
}

body
{
margin: 0 0 10px 0;

font-family: Franklin Gothic Book;
color: #AAAAAA;
font-size: 14px;
}

a
{
text-decoration: none;
}

img
{
border: none;
}

#clear_floats
{
clear: both;
}

#global
{
width: auto;
min-width: 800px;
max-width: 1286px;

height: 100%;

margin: auto;
margin-bottom: 10px;

border: solid #CCCCCC;
border-width: 0 1px 1px 1px;
}

#logo
{
position: absolute;

float: left;

width: 120px;
height: 120px;

z-index: 2;
}

#header_text_holder
{
position: absolute;

border: 0px solid #FFFFFF;

z-index: 2;
}

#WKU_title
{
position: relative;

margin: 17px 0 0 112px;

float: left;

width: 450px;
height: 29px;

background-image:url(Western_Long_Text.png);
}

#Title_caption
{
position: relative;

margin-left: 125px;

float: left;

width: 277px;
height: 25px;

background-image:url(Higher_Standard_Text.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;

z-index: 0;
}

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

padding-left: 120px;

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: 0px solid #00FF00;
}

#side_bar_mask
{
position: relative;

width: 100%;
height: auto;

border: 0px solid #009900;
}

#left_side
{
position: relative;

float: left;

width: 148px;
height: auto;

padding: 0 0 0 1px;

text-align: left;

border: 0px dashed #FFAA00;

display: block;
}

#middle
{
width: auto;
height: auto;

margin: 0 164px;

text-align: justify;

border: 0px solid #0000FF;
}

#right_side
{
position: relative;

float: right;

width: 148px;
height: auto;

padding: 0 2px;

text-align: left;

border: 0px dashed #FFAA00;

display: block;
}

#SM_Parent
{
width: 142px;
height: 18px;

padding: 0 5px;

color: #FFFFFF;

background-image:url(Site_Map_Parent_BG.png);

border: 1px solid #000000;
}

#SM_Child
{
width: 142px;
height: 18px;

padding: 0 5px;

color: #666666;

background-image:url(Site_Map_Child_BG.png);

border: solid #000000;
border-width: 0 1px 1px 1px;
}
Page Code:


<body>

<div id="global">


<div id="header">

<div id="header_text_holder">

<div id="WKU_title"></div>

<div id="clear_floats"></div>

<div id="Title_caption"></div>

</div>

<div id="logo"><a href="#"><img src="5.0_Logo.png" /></a></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"> /* Area containing the columns */

<div id="side_bar_mask"> /* False container for positioning side bars */

<div id="left_side">
Site map navigation left off to condense code
Text left off to condense code
</div>

<div id="right_side">
Text left off to condense code
</div>

</div>

<div id="middle">
Text left off
</div>

<div id="clear_floats"></div>

</div>

</div>

</body>



</html>

But I am also have some other problems in IE where my layers are acting strange. My banner has 3 images that comprise an absolute layer floating just above it. The navigation is its own couple of layers relative to the Header Container. They look fine if FF, but IE causes them to act like their still inline and bumps them down the page creating a wider page, but more importantly messing with the left positioning of the Logo and its text.

I'll try out this new CSS for the columns and see the results. Any guesses on my banner?
redelite
July 31st, 2008, 10:58 AM
This link shows you common ways to do layouts, fluid and fixed, plus multiple ways of doing them. For your case, it has 4 different ways.

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Hope this helps you out if the other link doesn't. :thumb2:
BSM2049
July 31st, 2008, 06:03 PM
Thanks RE. The last layout on that page, I actually found somewhere, and it would work if my page's width was going to be 100%. But I have my page actually boxed into a global that stops expanding at 1286px. This is to keep lines of text in the Middle Content area from looking too long and boring.

But it might be a sacrifice I can make.

Creating the absolute floats makes the Sidebars relative to the page itself. And they will always stay 0 px away from the very sides of the browser window, but once the Global hits the 1286 limit, they keep moving farther and farther away from the Main Content.

Is there not a way to change the reference frame of a div? Instead of the absolute position starting from the very top left of the page, I'd like to like say absolute for so and so div starts at the very corner of this container division?

Can that be done with just CSS?

Oh and can anyone take a crack at my banner?
BSM2049
August 1st, 2008, 10:12 AM
I seemed to have fixed it. The negative margins solution works for both browsers.

However, the Global isn't expanding all the way down in FF. If the main content is too small the Global wraps around just the main content and doesn't wrap around the Sidebars as it should. It works fine in IE. It isn't really a big deal, but it'd be great if it behaved correctly.

I'm going to restructure the Header tonight and use floats again. Maybe it will display correctly IE in when I do.

The only reason I absoluted the Header_Text_Holder, was so that the logo would stay on top of everything and remain clickable. Before only the bottom half of the logo was clickable, because the divs of the text to the right were also floated left, but overlapped the logo.

I'll check it tonight.

Thanks for the help peoples.
redelite
August 1st, 2008, 11:08 AM
Put this code in your CSS after your #content block in your stylesheet and your expanding problem is fixed!



#content:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
BSM2049
August 1st, 2008, 01:29 PM
Thanks RE.

It works a charm. Didn't think to clear the floats off.
BSM2049
August 4th, 2008, 09:42 AM
Thanks to everyone who helped with this one. I managed to get everything lined up the way I wanted it to.

I even fixed the header and it seems to be fine.

If anyone wants to look over it and test it on different browsers, or has advice on my schema or how to implement some of my ideas, please feel free to do so.

Here is the new layout as of current:

http://www.wku.edu/~markanthony.echipare/5.0/Index/_index.php (http://www.wku.edu/%7Emarkanthony.echipare/5.0/Index/_index.php)

Thanks again everyone.