homepage Welcome to WebmasterWorld Guest from 54.204.182.118
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
The 3 coll fluid content + header footer problem
halfway house of stooopid
appi2

5+ Year Member



 
Msg#: 3678879 posted 6:22 pm on Jun 19, 2008 (gmt 0)

***WARNING THIS POST IS MAY BE SILLY***

All I want is
¦----------- HEADER -----------¦
¦leftcoll¦¦%content%¦¦rightcoll¦
¦---------- FOOTER ------------¦

fixed L&R collums with a fluid content and where the background of each coll reaches the footer.

But. They say don't use tables for design, so you try but you always end up with either the content in the wrong order in the source (leftcoll rightcoll content) or the leftcoll/rightcoll/content background doesn't have the right height for your design.

Its so much easier to do
<div id="header"></div>
<table>
<tr>
<td>menu</td>
<td>content</td>
<td>adspam</td>
<tr>
</table>
<div id="footer"></div>

Even aunty beeb (BBC) the bastion of political correctness (unless your fat or smoke;)) uses tables for its basic 3coll layout. It won't cause any problems with those assistive tecnologies or googlebot. It doesn't break any rules (QUIET YOU), your content appears in the order its supposed to and is read in the right order.

But I want to be uber cool with CSS (may also be read as stoopid), I want to use the latest greatest bleeding edge CSS designs.

Ok then lets be silly.

CSS does have a nice little layout property the display:table, display:table-cell, if you apply it to a div your div reacts as a table or table cell. None of those pesky problems that the float propoerty give us (floaters would have been a more apt name).

Great so lets get going, but oh no.. IE, that damn browser, doesn't support the CSS table property. Right thats it. If it's going to behave like a retard then we shall treat it like one and treat the clever, nice cuddly browsers as the clever little things they are.

Time for a cheat.
Using IEs conditional comments (also known as were crap and we know it) we can feed all IE browsers a table and the rest of the world some uber cool CSS, yay were great.

eg.
#############

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 coll CSS halfway house</title>
<style type="text/css">
* {/*border:1px solid #000;*/
padding:0;
margin:0;
}

body {
font-size:101%;
font-family:Arial, Helvetica, sans-serif
}

/* The next four rules are not important. Just for this demo*/
p { margin:10px; }

ul { margin-left:20px; }

h3 { text-align:center }

.adspam {
width:10em;
border:1px solid #000;
margin:0 auto 20px auto;
background-color:#D0C9FC
}

#header {
height:80px;
width:99%;
background-color:#8080C0;
margin:0 auto;
overflow: hidden;
min-width:45em;
}

#page2 {
display:table;
width:99%;
background-color:#808000;
margin:0 auto;
overflow: hidden;
}

#leftcolumn {
display:table-cell;
width:11.25em;
background-color:#8080FF;
min-width:11.25em;
}

#content {
display:table-cell;
background-color:#008080;
min-width:22.5em;
}

#rightcolumn {
display:table-cell;
width:11.25em;
background-color:#FFCB97;
min-width:11.25em;
}

#footer {
height:80px;
width:99%;
background-color:#FFA4A4;
margin:0 auto;
overflow: hidden;
min-width:45em;
}
</style>
<!--[if IE]>
<style type="text/css">
#page2 {display:block;}
#leftcolumn {display:block}
##rightcolumn {diplay:block}
table {border-collapse: collapse;
width:100%;}
td {vertical-align:top}
/*Make sure you set the td background colour to match the div colours above*/
#lefttd {background-color:#8080FF; width:11.25em;}
#contenttd {background-color:#008080}
#righttd { background-color:#FFCB97; width:11.25em;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<h1>3 coll CSS halfway house</h1>
</div>
<div id="page2">
<!--We hide the table from all browsers but IE-->
<!--[if IE]>
<table width="100%">
<tr>
<td id="lefttd">
<![endif]-->
<div id="leftcolumn">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</div>
<!--[if IE]></td>
<td id="contenttd">
<![endif]-->
<div id="content">
<h2>Content</h2>
<p>In IE the 3 columns are actually table cells with an inner div. We use IE's conditional comments to hide the table from other browsers.</p>
<p>In all other browsers the 3 columns are
divs with CSS property display:table-cell.</p>
<p>No matter which collum has the most content the other columns will match that columns height and reach the footer div.</p>
<p>The whole page is centered and this collum (content) is fluid while the two side columns are of a fixed width in em.</p>
<p>This design will look the same and was tested in</p>
<ul>
<li> FF2+</li>
<li>Opera9.27+</li>
<li>IE6+</li>
<li>Safari3+</li>
<li>Konqueror 3.5+</li>
</ul>
<p>Have fun.<br>
appi2 webmasterworld.com</p>
</div>
<!--[if IE]></td>
<td id="righttd">
<![endif]-->
<div id="rightcolumn">
<h3>rightcoll</h3>
<div class="adspam"> Adspam
<p>Buy more widgets</p>
</div>
<div class="adspam"> Adspam
<p>Breed waffles</p>
</div>
</div>
<!--[if IE]></td>
</tr>
</table>
<![endif]-->
</div>
<div id="footer">
<h5>The footer</h5>
</div>
</body>
</html>

#############

So. whatja fink?

 

gracesaieva

5+ Year Member



 
Msg#: 3678879 posted 6:01 pm on Jun 25, 2008 (gmt 0)

I think people are so used to seeing design with tables that they need to be introduced to other types of design. A good example is the css zen website where many of the designs are not 3 even columns, straight to the bottom, but have menus that are to the side and shorter or longer for their content. I think as more designers move away from the c-column look (at least three equal length columns) than people will like it more. So what if the columns don't all make it to the finish line at the same time?

appi2

5+ Year Member



 
Msg#: 3678879 posted 6:11 pm on Jun 25, 2008 (gmt 0)

So what if the columns don't all make it to the finish line at the same time

Then those who want to get the background colour/image don't get what they want.

You can do the above with a slight trick of massive padding-bottom and margin-bottom like the last example in this post [webmasterworld.com]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved