CSS Code for 3-column page

Andy
Administrator
Veteran

Posts: 5 752

« on: June 28, 2005, 10:03:30 PM »

I would be interested if anyone has managed to create cross-browser compatible code for a 3-column page with header and footer using CSS. If you try and do this you find all sorts of problems when you switch between say Firefox and IE6 and you resize the browser window.

In the end, I decided to use a table for the columns so they don't wrap around.

Here is the page template I came up with:

<html>
<head>
<title>CSS Positioning</title>
<style>

body {
margin: 0px;
}

#header {
position: absolute;
top: 0px;
left: 0px;
color: #000;
background: #999;
}

#container {
position: absolute;
top: 50px;
left: 10px;
color: #000;
background: #ddd;
}

#footer {
color: #fff;
background: #009;
text-align: center;
}

div #left {
width: 100px;
background: #3ff;
}

div #middle {
background: #f3f;
}

div #right {
width: 100px;
background: #ff3;
}

</style>
</head>
<body>

<div id="container">
<table width="100%" border=1>
<tr>

<td width=150 valign="top">
<div id="left">
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
</td>

<td valign="top">
<div id="middle">
Middle<br>
Middle<br>
</div>
</td>

<td width=150 valign="top">
<div id="right">
Right
</div>
</td>

</tr>
</table>

<div id="footer">
Footer
</div>
</div>

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

</body>
</html>

The style code would normally be in a separate style sheet file. You may notice that the header html is at the bottom of the code even though it is displayed at the top of the page.

This code is handy for experimenting with the effects of changing width parameters etc. I set the table border 'on' with a width of 1 so you can see the actual table dimensions even when the <div> blocks are smaller than the table cells. i.e. the left div is 100px wide but the table cell is 150px wide.


	Report to moderator Logged

IP Address Trace
Karaoke on PC

donecweb
Administrator
Veteran

Posts: 1 303

DonecWeb

Re: CSS Code for 3-column page

« Reply #1 on: June 28, 2005, 11:12:08 PM »

Here is a demo site made by a Guru from statcounter forum and it seems to fit you request perfectly.
http://www.jonra.com/css-demos/css-flexible.html

DonEc


	Report to moderator Logged

DonEc Web

Links and accurate information provide the best answer, while garbage in provides garbage out.

Andy
Administrator
Veteran

Posts: 5 752

Re: CSS Code for 3-column page

« Reply #2 on: June 28, 2005, 11:39:48 PM »

Thanks Don, at first examination it does seem to achieve the results. :-)


	Report to moderator Logged

IP Address Trace
Karaoke on PC

donecweb
Administrator
Veteran

Posts: 1 303

DonecWeb

Re: CSS Code for 3-column page

« Reply #3 on: June 29, 2005, 04:04:29 AM »

I have been messing with it for a few days trying to learn and have made several pages using similar methods and have learned quite a lot and still know nothing. Grin

Here is another site he has that has some more examples of CSS that I have found interesting.
http://www.jonra.com/css-demos/css-1-column-layout.html#

DonEc


	Report to moderator Logged

DonEc Web

Links and accurate information provide the best answer, while garbage in provides garbage out.

Andy
Administrator
Veteran

Posts: 5 752

Re: CSS Code for 3-column page

« Reply #4 on: June 29, 2005, 10:34:11 PM »

Yeah, I surfed jonra.com and checked out the examples, they are good and it's unfortunate this guy has not optimized his pages for search engines to get traffic. But now we have some links to him/her, hopefully it'll change.

In the end I went for a combination of css and tables. This is because I couldn't make my own custom version work only with css.

I developed my own trick

You can use a div to push content down the page so you can later on place an absolutely positioned block in that place. This is for SEO reasons where the header and navigation code is best placed below content code.


	Report to moderator Logged

IP Address Trace
Karaoke on PC

donecweb
Administrator
Veteran

Posts: 1 303

DonecWeb

Re: CSS Code for 3-column page

« Reply #5 on: June 30, 2005, 04:43:48 AM »

Jonra is working on a complete demo section on CSS for his site but it is not ready yet. What I showed you were just some of his examples he uses when helping people at statcounter.

DonEc


	Report to moderator Logged

DonEc Web

Links and accurate information provide the best answer, while garbage in provides garbage out.

Andy
Administrator
Veteran

Posts: 5 752

Re: CSS Code for 3-column page

« Reply #6 on: July 27, 2005, 10:29:35 PM »

I finally worked it out. Once I tidy my code I will post, but here is what sparked me off on the quest to understand how it works: http://www.bubblessoc.net/skins/ This site is table-less css but still not good enough since it's not fluid!

They use fixed width columns. For fluid sites, you have to use percentage settings for column widths.

I have produced some pages with selectable skins which have totally eradicated any tables. Stand by...

http://aweconsulting.co.uk/ On the right of the page is a drop-down selection for the skins.


« Last Edit: November 10, 2006, 01:30:02 PM by Andy »	Report to moderator Logged

IP Address Trace
Karaoke on PC

Pages: [1]


Webmaster Key Forums Webmaster Corner Site Design and Web Authoring CSS Code for 3-column page