Join Today! | Events | Help
Advanced    
Forums » Design Your Site » Web Page Design » CSS » 3 equalizing col layout +header +footer


Get thousands of extra category-targeted visitors to your site this month!

Drive thousands of Category Targeted Visitors to your website starting in just 5 minutes. Prosubmit-traffic.com can deliver you Real Quality Visitors at the lowest price on the web today. We offer all SitePoint.com members an extra 1000 visitors with purchase, plus, we guarantee full campaign delivery within 30-days!

Click here for Prosubmit Traffic.com!

Search this Thread:

newthread reply CSS
prev.gif Previous Thread | Next Thread next.gif
Linear Hybrid Threaded

3 equalizing col layout +header +footer  Pages (12): [1] 2 3 4 5 » ... Last »
folder icon   Dec 18, 2003, 07:19
3 equalizing col layout +header +footer Post #1
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

I've seen a number of threads asking for this type of layout so I hope nobody minds if I post this example that i've coded as it should be useful to a lot of people.

The idea was to produce a table type layout where:

1) any column could be the longest depending on content.
2) different coloured columns with borders.
3) a header and footer.
4) the footer must sit at the bottom of the window unless the content is greater. Then the footer sits at the bottom of the document.

While most of these problems have been partially solved before, I have not seen a solution that fulfils all the requirements (although I expect other people have of course done this before).

Its been tested in ie5, ie5.5, ie6, mozilla 1.2 1.4, firebird 0.6.1, Opera7(slight problem with footer but nothing that notices) and netscape 6.2. (Opera 6 doesn't like it but its usable and code can be added to make it acceptable). I suspect older browsers will fall over when they see it, however there's about 90% of the market covered here anyway.

I don't have a mac to test on but I know it works on Mac Firebird and Mac Netscape 7, netscape 6 OS 9. (On Mac IE5.1 and Safari1.1.1 it works with the columns but they don't like the footer but the design is still perfectly usable. I'm sure theres a mac hack that would fix it as the code is quite simple anyway.)

Well thats enough talking about it, I suppose youll want to see it now.
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

If you think its any good or your interested in how it works then shout. If you think its rubbish then keep quiet. (I've only posted it here because I think it may be useful and there are no links to any site on the demo.)

It's commented out so feel free to use it.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 18, 2003, 11:03
Post #2
furryyuri [search]
Pointiest Petitions

Avatar

Joined: Jul 2003
Location: pittsburgh, pa

You rock!


Posts: 331
off.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 18, 2003, 13:14
Post #3
Dangermouse [search]
Dangermoose!

Avatar

Joined: Oct 2003
Location: UK

Good job


Posts: 656
on.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 18, 2003, 13:26
Post #4
jamesxv7 [search]
~ Spanish first language! ~

Avatar

Joined: Oct 2003
Location: Island of Puerto Rico @ the Caribbean

Hi to all:

Great job Paul. Inspired in your layout I build mine. Check it here: http://www.ecodig.com/index_.php until I finish it. If any one want the code I will give it. I think it works in any platform.


__________________
James: Ecodig - My Blog - My Gallery
Validate your sites: CSS - HTML/XHTML
Without faith you are lost.
Posts: 868
off.gif sendpm.gif email.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 19, 2003, 13:29
Post #5
dprantzalos [search]
SitePoint Member

Joined: Dec 2003
Location: Macomb, MI

Hmm, very nice.

Now, can you make it such that the min-width of the header (or 3 columns combined) totals 800px, AND if the browser is increased to a size larger, that the left & right nav columns increase too but not beyond 250 pixels each (max-width)? AND keep it cross-browser compatible?

If you do, I'll give you a great big kiss

-jim


Posts: 17
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 19, 2003, 13:37
Post #6
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Quote:

If you do, I'll give you a great big kiss
That's a reason not to do it

I could probably do it for mozilla but ie would need to be hacked to death. (which is probably the best thing for it lol).

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 19, 2003, 14:32
Post #7
dprantzalos [search]
SitePoint Member

Joined: Dec 2003
Location: Macomb, MI

Quote: Paul O'B

That's a reason not to do it

I could probably do it for mozilla but ie would need to be hacked to death. (which is probably the best thing for it lol).

Paul

Ok, I challenge you! Do it!

Actually, if you could help me out, I'd pay you for it dude. I just posted a message in the trading post for a css/xhtml freelancer.

-jim


Posts: 17
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 21, 2003, 08:16
Post #8
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Quote:


Ok, I challenge you! Do it!
Haven't got the time at the moment I'm afraid I saw your post in trading post and it looks like you'll find somenone to do what you want ok.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 05:22
Post #9
jodmcc [search]
SitePoint Zealot

Avatar

Joined: Dec 2003
Location: Houston, Texas

Here's the address:

http://users2.ev1.net/~jodmcc/2_col.html


Also, I have attached 2 screenshots.

Thanks,
John


jodmcc has attached the following image(s):
   
Posts: 134
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 06:47
Post #10
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

Hi John I notice that in ie5 -6 (PC) the image has 5px padding between the vertically stacked floats.

For some reason Ie is interpreting the padding from your #right style. Just change it to padding-left:5px (if you need it at all?)

Code:

#right {
 margin-right: 10px;
 margin-left: 230px;
 border: none;
 background-color: #FFFFFF;
 top: 164px;
 right: 10px;
 padding-left: 5px;
}

It now looks the same as mozilla (pc). (As I mentioned before I don't have a mac so perhaps someone with a make can have a play around with it.)

BTW you posted this in the wrong thread which might confuse some people ( confused me lol).

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 08:40
Post #11
jodmcc [search]
SitePoint Zealot

Avatar

Joined: Dec 2003
Location: Houston, Texas

Thanks Paul,
You mentioned this was posted in the wrong thread, I thought this was a CSS question. Am I wrong?

John


Posts: 134
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 08:47
Post #12
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi John,

Quote:


You mentioned this was posted in the wrong thread, I thought this was a CSS question. Am I wrong?
You Hi-jacked my thread lol.
This was your post:
Quote:


Here's the address:

http://users2.ev1.net/~jodmcc/2_col.html


Also, I have attached 2 screenshots.

Thanks,
John

No one else reading this thread will know what you are talking about, unless of course they have read your other thread

Your original thread was a bit lower down

It doesn't matter to me but you may miss some traffic from your original thread, which would have gone to the top of the list had you posted correctly.

Never mind eh

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 09:04
Post #13
John Colby [search]
Ensure you finish what you sta

Avatar

Joined: Aug 2003
Location: University of Central England, U.K.

Paul

Great - many thanks - looks great


__________________
John
No electrons were harmed during the creation, transmission
or reading of this posting. However, many were excited and
some may have enjoyed the experience.
Posts: 487
off.gif sendpm.gif email.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 12:22
Post #14
vgarcia [search]
Am I a compass or a thimble?

Avatar

Joined: Jan 2002
Location: Massachusetts, US

Thread stickied


__________________
Vinnie Garcia :: Design Team Advisor :: blog
Links: CSS » XML » SQL » Firefox » mod_rewrite » Accessibility
“The high road is not the easy road, but it leads to a better place.”
-John Kerry
Posts: 10,140
off.gif sendpm.gif email.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 22, 2003, 13:39
Post #15
jodmcc [search]
SitePoint Zealot

Avatar

Joined: Dec 2003
Location: Houston, Texas

Paul,

I just caught what you were saying about the wrong thread. My Bad.

John


Posts: 134
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 26, 2003, 11:29
Post #16
pas [search]
SitePoint Evangelist


Joined: Aug 2002
Location: USA

Thanks very much for posting this template. I think the hardest part probably is figuring out browser compatibility. Could you elaborate on the various browser hacks, why they work, and why they're needed?

Code:

html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

* html #footer {/*only ie gets this style*/
	\height:52px;/* for ie5 */
	he\ight:50px;/* for ie6 */

* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

Also, any idea how it would display on older browsers?


Posts: 540
off.gif sendpm.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 26, 2003, 14:09
Post #17
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

Here goes quickly

Quote:


html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
Mozilla and Opera7 support min-height which IE doesn't so for ie you have to use height alone.

Therefore ie will render the page at the height specified but if content is greater it will automatically expand unlike mozilla (and others) which will overflow. Therefore mozilla needs height auto which will let the height expand with the content but the min-height is still observed so we now have both browsers behaving the same. Obviously we need to hide the height auto from ie otherwise it will have no height to start with.

That's why we use the child selector (>) to hide the styles from IE as IE doesn't understand the child selector. End result=both browers happy
Quote:


* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
IE5 and ie5.5. (and ie6 in quirks mode) have a broken box model and include padding and borders inside the width of an element instead of adding it to the width as per the specs.

As this is only an ie problem we use the star selector (universal selector) hack which only IE parses when in fact it shouldn't. Therefore to give style just to ie you can use * html followed by the style and only ie will parse it.

The second part is the backslash which when it occurs in the middle of the property causes ie5 and 5.5. to stop parsing that part of the style and move on to the next bit. This allows us to pass the values to even up the fact that ie5 and ie5.5. aren't adding the borders/padding to the elements width as they should. We just add up whatever the total width should be and give that to ie5 and 5.5.

IE6 does'nt trip up on the backslash and so still reads the correct width and does understand the box model so again everyone is happy
Quote:


* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
IE has a bug in that it adds padding to content surrounding a float and when content extends passed the bottom of the float there is a 3 pixel jog that can't be reduced by normal means.

The solution is either to give the content a specified width (if at all possible) or give it a specified height. However if you want the height to be fluid then you can use 1% height remembering that ie will automatically expand that 1% to fit the content. Again we need to hide this from other browsers otherwise they will adhere to the 1% height and ruin the layout.

All the above hacks have been explained before and there are many links on the web so just do a search for these terms:
simplified box model hack
3 pixel jog
star selector big
child selector hack
Quote:


Also, any idea how it would display on older browsers?
I doubt it will display at all!

I have listed the browers it has been checke on so far and IE5 displays more or less perfectly and is about as old as I want to support.

However the best thing to do would be to use import for the css to hide it from older browsers such as NN4 and then set up a very simple style rule that will allow the pages to be viewed and read.

Again if you want to search on the web there are some 3 column layouts that do work for Netscape 4, but they are pretty basic.

I hope the above all makes sense but I've just rushed of off quickly and I didn't have time to find you the links (I'm not supposed to be on the computer right now as we have guests lol)

Anyway hope that helps.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 29, 2003, 06:42
Post #18
Radar5756 [search]
SitePoint Enthusiast


Joined: Sep 2003
Location: Michigan

Hi Paul,

Great post!

Bill


Posts: 35
off.gif sendpm.gif email.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 29, 2003, 07:06
Post #19
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Quote:


Great post!
Thanks Bill glad you liked it


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 30, 2003, 17:03
Post #20
lundberg [search]
SitePoint Addict

Avatar

Joined: Mar 2003
Location: Sweden

What about If I only want 2 cols that follows each other??


__________________


Martin Lundberg
Sweden
Posts: 238
off.gif sendpm.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 31, 2003, 02:30
Post #21
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

Quote:


What about If I only want 2 cols that follows each other??
Well a simpler design could probably be achieved for 2 columns but using my 3 column layout as above you only need to delete the right column and then take away the right margin on the outer element.

The left column size can be increased by increasing the margin left on the outer class but make sure you also increase the float to match. Also, you wont need the repeating gif for the colour as the background colour will show through

I've just redone it very quickly in less than 5 minutes (so I hope there are no errors).

http://www.pmob.co.uk/temp/2colfixedtest_4.htm

Hope that helps, but shout if it's not what you want.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 31, 2003, 06:58
Post #22
lundberg [search]
SitePoint Addict

Avatar

Joined: Mar 2003
Location: Sweden

Thanks, It confuses me a little when the head and footer is there too. I will try to get it to work and come back if it doesn't =)

Here is what i've done so you can take a look at it:
PAGE: http://www.shell.linux.se/lundberg/ssa/index.php
CSS: http://www.shell.linux.se/lundberg/ssa/css/eskiimo.css

Right under the menu I want two cols. Left col should be the content col where the main text will be and the left col will be like a sidebar. much like alistapart and simplebits.

Any tips would be great =)


__________________


Martin Lundberg
Sweden
Posts: 238
off.gif sendpm.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 31, 2003, 07:45
Post #23
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

Quote:

Any tips would be great =)
Do you want your content to be 100% high even when the content is less? If so you will need to set html,body {100%} and also set your container to 100%, plus add the height:auto for mozilla browsers etc.

If not then don't bother.

If you have two columns and you want them to be the same length then you can have the main column in the flow and then float the right column right.

Set a right-margin on the main content and a corresponding left margin on the float. You may have to fiddle to make the margin occupy the same space. (negative margin on the float etc).

By doing this the main content will have a border if it is longer than the float. If the float is longer the floats border will increase making it look like two equalising columns as they both share the same border. You will need to add a clear:both after the content to push the bottom border down.

Alternatively you can use the same method as in my example where you make the main content shorter than the space it has to fill (ie margin-left:160px and then float the right column in the main content and then drag it outside of the content to form its own column. (Remembering to keep a slight overlap so that a footer will be pushed downwards.)

If you need a normal footer then that should be ok. If you want a footer at bottom of window then you will need to refer to my example and use negative margins and a spacer div to compensate.

Thats roughly how to do it If you get stuck just shout and I'll give you some code when I know exactly what you want.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 31, 2003, 08:09
Post #24
Paul O'B [search]
SitePoint Mentor

Avatar

Joined: Jan 2003

Hi,

Heres the simple version (no height and no footer):
CSS:

Code:

#contentLayer {
 margin-right:149px;
 text-align:left;
 border-right:1px solid #FFF;
 padding-left:2px;
color:#fff;background:#000;
}
#contentLayer p, #contentRight p {margin-top:0}
#contentRight {
 float:right;
 width:149px;
 border-left:1px solid #fff;
 position:relative;
}

Html:
Code:

etc........ 
<div id="menuItemLayer">
  <ul>
   <li id="current"><a href="">Blog</a></li>
   <li><a href="">Fotografier</a></li>
   <li><a href="">Jag</a></li>
   <li><a href="">Arbeten</a></li>
   <li><a href="">Länkar</a></li>
  </ul>
 </div>
 <div id="contentRight">
  <p>Right Content</p>
  <p>Right Content</p>
  <p>Right Content</p>
  <p>Right Content</p>
 </div>
 <div id="contentLayer">
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
	<p>Left content</p>
  </div>
</div>
</body>
</html>

If you need a different colour for the right column you may need to do that with a background repeating gif on the right side of the container.

Paul


Posts: 4,686
on.gif sendpm.gif email.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
folder icon   Dec 31, 2003, 08:11
Post #25
lundberg [search]
SitePoint Addict

Avatar

Joined: Mar 2003
Location: Sweden

hmm, hehe =) CSS is alittle tricky when it comes to taking the tables away. Well what I want is this. Under my menu div, I want 2 cols, the left one should be like 500px wide and the left one 200. The cols should not be at the bottom if there aren't that much text in them but I do want a footer under them.

Have to go! =) Thanks for the help!


__________________


Martin Lundberg
Sweden
Posts: 238
off.gif sendpm.gif home.gif buddy.gif Report Post | IP: Logged edit.gif reply.gif
Return to Top  Pages (12): [1] 2 3 4 5 » ... Last »

newthread reply CSS
prev.gif Previous Thread | Next Thread next.gif
Linear Hybrid Threaded

Similar Threads
Thread Thread Starter Forum Replies Last Post
3 column layout with header + footer Mencus CSS 4 Apr 23, 2004 22:23
CSS Layout Problem + CSS Sliding Doors & Lists! raydenx CSS 2 Oct 25, 2003 22:00

printer.gif Show Printable Version
sendtofriend.gif Email this Page
Forum Jump:

Forum Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
vB code is On
Smilies are On
[IMG] code is On

All times are GMT -7 hours. The time now is 06:09.

vBulletin v3.0.0 Beta 7, Copyright ©2000-2004, Jelsoft Enterprises Ltd.