3 equalizing col layout +header +footer

[Paul O'B]

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

[carrotflowers]

You rock!

[Dangermouse]

Good job

[jamesxv7]

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.

[dprantzalos]

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

[Paul O'B]

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

[dprantzalos]

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

[Paul O'B]

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

[jodmcc]

Here's the address:

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


Also, I have attached 2 screenshots.

Thanks,
John

[Paul O'B]

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;
 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

[jodmcc]

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

John

[Paul O'B]

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

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

[John Colby]

Paul

Great - many thanks - looks great

[vgarcia]

Thread stickied

[jodmcc]

Paul,

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

John

[pas]

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?

[Paul O'B]

Hi,

Here goes quickly

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

* 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

[Radar5756]

Hi Paul,

Great post!

Bill

[Paul O'B]

Great post!

Thanks Bill glad you liked it

[lundberg]

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

[Paul O'B]

Hi,

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

[lundberg]

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

[Paul O'B]

Hi,

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

[Paul O'B]

Hi,

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

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

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

[lundberg]

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!