3 equalizing col layout +header +footer


#1

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


#2

You rock!


#3

Good job :eek2:


#4

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.


#5

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 :eek2:

-jim


#6

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

That's a reason not to do it smile

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


#7

Ok, I challenge you! :eek: 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


#8

Ok, I challenge you! :eek: Do it!

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

Paul


#9

Here's the address:

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

Also, I have attached 2 screenshots.

Thanks,
John


#10

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?)

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

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 smile ( confused me lol).

Paul


#11

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

John


#12

Hi John,

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:

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 smile

Your original thread was a bit lower down smile

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 smile

Paul


#13

Paul

Great - many thanks - looks great


#14

Thread stickied smile


#15

Paul,

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

John


#16

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?

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?


#17

Hi,

Here goes quickly smile

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 smile

  • 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:)

  • 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

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


#18

Hi Paul,

Great post!

Bill


#19

Great post!

Thanks Bill glad you liked it smile


#20

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