Mobile Friendly Website

CSSPLAY

Doing it with style

Three cols COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Simon:-
Looks nice and is certainly simple. However, this breaks in Firefox when the middle column has wrapping content. This can be fixed by changing #center to: "#center {position:relative; display:block; margin-left: 201px; margin-right: 191px;}". There may be another way to fix it, but that's what came to mind first :)
(23.04.2004, 14:39)

Tim:-
I'm viewing in ie6 and the columns all work fine. for the first example . . . ?
(26.04.2004, 06:52)

Lou (powerputty):-
Hey Stu, I've been checking out your site ever since I joined CSS Forums. A question on your 3-column layout: Can you make the footer stay at the bottom of either the viewport or document depending on the size (height) of the content in each column?
(27.04.2004, 16:11)

Vijayakumar:-
I am realy happy, i have to learn more things.. this site very very useful for me.. thanks for ur given information..........once again thank u.....
(19.05.2004, 09:03)

Tom:-
hey stu, can you recommend a way to do this, but with the whole thing being a fixed width (eg, big margins on either side of the whole block (header, footer and columns)? Would I just put the whole thing inside a centered DIV, or whould i have to have 3 columns within the center of another 3 columns?
(07.06.2004, 19:35)

Stu:-
Tom, just resize the container div and center it.
(07.06.2004, 20:58)

Dave:-
the "hover here to make the middle column the longest" text is often not in the middle column. And the text outside of the boxes often overlays the inside. I tested with NN, Opera, IE6, Mozilla, and FF as your logs should show. Let me know if you fix it. ioconnor@mailblocks.com
(22.06.2004, 18:57)

Stu:-
This was just a basic framework of an idea. The middle column was styled as float:left so that at smaller screen resolutions it would end up under the left column text. I have changed this to give it a left and right margin so that it stays in the middle. Also added a IE hack to correct the 3px left margin bug.
(22.06.2004, 22:07)

sts:-
Thanks for the code, it´s exactly what I was searching for and what I was not able to do other way than by tables.
(26.07.2004, 23:48)

Enleth:-
Well, this code is exactly what I was searching for - I'm converting VERY old site to XHTML/CSS and it's header is just impossible to make in CSS for me - and your code saved me hours of work - thanks!
(01.08.2004, 14:52)

Helma:-
would it be possible to repeat a background-image in either of the left, center or right "columns"?
(09.11.2004, 08:38)

Ray:-
First, thank god for this article. My site is up, but I got a "bug". I get what is described a "fouc" but on steriods. Its not the usuall quick flash but an unstlyed content untill I mouse over something. I've got my nav links all done in SSI and can nail down the prob. The site is http:www.buildingbodies.ca. ANy one got any tips? My email Ray@buildingbodies.ca Thanks a bunch.
(26.11.2004, 21:22)

Ray:-
Simon, I installed firefox..(which is awesome thanks.) But I cant find a page to crash anymore! If I could get the unstyled content to be more "reliable" I could work on the problem.
Whats happens when is does happen is the Left and right divs content appears out of the boxes over lapping the center div untill a mouseover of a graphic or refresh. Thanks for your patience with a newbie!
(04.12.2004, 19:30)

Nick:-
Thanks for putting this article up. Loves it.... but is there any way to make the center column never disappear-- even if the browser is resized to a very small width ? I'm using Firefox. Thanks in advance :D
(14.01.2005, 21:42)

Stu:-
Nick, sorry I missed your post. You could use min-width values but this would not work in IE.
There are fixes for this posted elsewhere on the web though.
(24.01.2005, 11:37)

Anonym:-
Please please help me. I have an IE, Firefox issue. Point your browsers to http://www.swindon-ksmbda.org.uk/tuesday.htm. In Firefox (the best browser) it is rendered correctly. In IE - the text isn't visible. What am I missing this is driving me insane... :'(
(27.01.2005, 08:58)

Stu:-
Hi Anonym, I have looked at your page in IE6 and FF and I cannot see any problem with the text. The menu works correctly in both.
(27.01.2005, 21:37)

Liz:-
Hi Stu,
the article is great, and it realy clears up the css code for a 3 colomn page !
I faced a problem though. If you put a paragraph in one of the center colomns, it applies a margin at the "container" in firefox. isn't that stange ?! anyone else facing this problem?

cheers !
(29.04.2005, 19:26)

Stu:-
Liz, do you mean a top margin? If so this is the normal practice for FF. You can style the margin for <p> to get rid of the top margin.
p {margin-top:0;} for instance.
(29.04.2005, 19:59)

Liz:-
that works great. THANX !
(29.04.2005, 20:26)

Stu:-
Liz, you may need to increase the bottom margin to compensate.
(29.04.2005, 21:14)

Mario:-
Found a small problem in IE6. To reproduce:
1) Start IE6 and open the "Favorites" sidebar
2) Load 3col page. The three columns are crammed inside the middle one.
3) Remove the sidebar. Everything back to normal
4) Show again the sidebar. The page continues to look fine.
(18.05.2005, 05:44)

Stu:-
Mario, I can't reproduce this is my vesion of IE6.
(18.05.2005, 10:25)

Mario:-
Interesting. I have XP SP2 and it is reliably reproduced. But if I remove the expanding column trick the problem disappears. Thanks!
(20.05.2005, 05:57)

H Jaitch:-
I have spent a week alone in the wilderness (actually the Central Highlands of VietNam) trying to figure a header/3-column/footer combo.

Several hours in HCMC at an InterNet Cafe led me to your site.

What a solution!

Thanks for your public spirit.

///
(13.06.2005, 14:51)

APD:-
Text in the borders! I was so close to figuring this out, but it would not come to me. Luckily you thought of it and documented it. Thanks! :)
(15.10.2005, 08:35)

totedati:-
Why only IE, Firefox and Opera!? Only me use Konqueror 90% of my time and Firefox only when web page is so scrambled and can not, and want to, see it!? Konqueror can also do better than Firefox, not all time, but Konqueror 3.2.0 ( Standard version in Mandrake 10.0 ) can show 'panoramic image viewer' and 'image magnifier' with 'smooth transition between images' but Firefox 1.0.5 can not do that. Konqueror can be a real player here ;-). Just my two cents ...
(08.11.2005, 18:37)

jaroslaw:-
The stuff is really great, but font sizes are somewhat broken in Konqueror 3.5.0 (the only browser for PC to successfully pass Acid2).
(15.12.2005, 07:02)

Leon:-
Thanks for your good work Stu!
Could anyone help me with my following problem, please? - I want to integrate all the code within a bodycontainer-div with fix width: 960px. So all content should have this fix width. Furthermore it should be centered on the screen. How can I do this?
(17.02.2006, 13:09)

marientje:-
wow, this is really great!
(13.04.2006, 11:05)

Alf:-
Stu

This is simply amazing, I've been trying to reach the very same result for a week and something was always not right. You're a genius!!!!
(07.05.2006, 00:32)

Duncan:-
Very nice Stu. One question though, for the purposes of SEO could the code for the left, right and center colums be reorganised so center appears first or second, rather than last? I did have a little play, but putting the code for the center colum first or second causes a few problems in positioning of text in the right colum. Great work anyway!
(05.08.2006, 11:52)

jules:-
perrrfekt! thanx a lot for that easy yet working tip!
(28.10.2006, 16:37)

Paladin:-
This is a fantastic style and I have tried my best to deploy it using php include files and a templating theme. One thing is driving me mad though, there is a box under #left with a background color of #999999 (in Dreamweaver and every browser I have tried) - nothing that I have tried gets rid of this colour!
(05.11.2006, 23:51)

Joe:-
Very great work Stu
Read Mario's comment above, (I'm sure you would have already found it out but in any case just putting it here) tried to replicate it, I resized my IE (on XP SP2) window, decreased the width and the text started misbehaving. On Firefox when I do the same, the text overlaps the other.
TC
(01.02.2007, 18:07)

Tim 2:-
Very nice stuff Stu.
However, I have a habit of always assigning h1 to my header for search bots and people with "no style". This pushes the text down under the #container.
What am I not doing right?
Ta
(06.02.2007, 23:21)

Max:-
Absolutely fanomenal. I spennt over 3 weeks solving this problem and nothing worked proper.
Your great!
(08.02.2007, 19:35)

Ronald Hofstee:-
Hey Stu,
I'm want to place a flash object into the left column but if i do that the flash object is oblique in front of the column,
do you now how to place a flash object "good" in the column??
Thanks in advance,
Ronald Hofstee

P.S
I have Windows XP SP2 and I use dreamweaver

(Sorry for my Enlish but I'm Dutch)
(05.03.2007, 20:38)

Ronald Hofstee:-
I forgot to say my E-mail adress is:
Ronald.hofstee@gmail.com
(05.03.2007, 20:40)

Paladin:-
Been using this for a while and it works wonderfully for self-developed pages. But, when trying to include anything like PHPBB.x or Simple forums the middle/content layour goes ape and doesn't start rendering anything until mid-screen, from there it then scrolls all down the page - of course this is in IE 7, in Firefox no problem at all.

I have used the "<!--[if IE]>
<style type="text/css">
#container {display:inline-block;}
#left {width:197px;}
</style>
<![endif]-->"
trick but this makes no difference.
(23.03.2007, 15:44)

movaxes:-
Just Great!! This is good for my bandwidth, lol.
(27.03.2007, 00:12)

wxydesign:-
Is it possible to make the center column have a minimum width that it must hold the page to? Or conversely, can we restrict the overall width of the page to a minimum number say 800 or 1000px wide? This way the middle column can never be hidden by the right column overlapping it.
(20.07.2007, 22:14)

rvwoens:-
why is everybody forcing us to work with divs??? as you can see, this solution does not work when the divs width's are very small. Divs are *not* meant for columns, so why use them for colums? Use tables for colums. This whole thing is so easy with tables:

[table class="container"]
[tr][td colspan=3]header[/td][/tr]
[tr]
[td id="left"]xxx[/td]
[td id="center"]xxx[/td]
[td id="right"]xxx[/td]
[/tr]
[tr][td colspan=3]footer[/td][/tr]
[/table]

works in all browsers and doesn't need any css except for te stuff where css was meant for like width/color etc. No css quicksmode and no dirty tricks needed to get divs on a horizonal line. These float:left etc constructions are ugly, incompatible and useless. For instance: if you want 4 colums, this construct is useless. With tables, it just extends to how many columns you want. It seems that tables are considered not "cool" nowadays, but users just want working websites, and don't mind how "cool" the css is.
(26.10.2007, 20:36)

Stu:-
rvwoens, then by all means use your tables. I am not going to argue :)
(26.10.2007, 20:56)

Ulterior:-
It doesn't work as it should - try adding very long unwrappable line to the center and u will c what i mean. If you manage to correct the behaviour - i would be glad if you write me a little email :) leonardas.survila at gmail.com
(11.11.2007, 08:55)

Dirkjan Schele:-
Hi Stu,

Thanks for your fab css site. Tried some stuff to get deeper into css and layers.

Got some problems in IE7 with the 3col version. Rendering of content in container went wrong: left layer seemed to be the problem (lay-over the #container content)
However changed the position from relative to absolute and even IE7 renders well!

Keep it up!
(11.11.2007, 23:02)

rhey:-
This is what I'm looking for.

Thanks a lot....
(18.11.2007, 23:09)

Denise:-
I am learning CSS - just found your site - after the fact of course! I needed a header, footer, and three columns.

This is how I figured mine. What do I need so that it will work in all browsers and moniter sizes?

Center column: <div id="photolayer" style="z-index: 1; position: absolute; left: 161px; top: 275px; width: 686px;
height: 610px; background-color: #ffffff;layer-background-color:#ffffff; visibility: invisible">

My email is DBabbit at gmail.com
(05.12.2007, 02:03)

Denise:-
Limited comment size. @@(
The rest of it is Left column: <!-- Site navigation menu -->
<div id="photolayer" style="z-index: 1; position: absolute; left: 11px; top: 275px; width: 150px;
height: 610px; background-color:#66ccff; layer-background-color:#0000ff; visibility: invisible">

DBabbit at gmail.com
(05.12.2007, 02:05)

Denise:-
Right column: <div id="photolayer" style="z-index: 1; position: absolute; right: 11px; top: 275px; width: 150px;
height: 610px; background-color:#66ccff; layer-background-color: #0000ff; visibility: invisible">
<br>
Footer: <div id="photolayer" style="z-index: 1; position: absolute; left: 11px; top: 880px; width: 100%;
height: 25px; background-color:#ffcc33; layer-background-color:#ff99cc; visibility: invisible">

DBabbit at gmail.com
(05.12.2007, 02:06)

xlee:-
long unwrappable line can be solved if use display: table; display: table-row; and display: table-cell;
(05.08.2008, 23:45)

Steve:-
Used the technique with background images in the left and middle columns. For some reason on IE6 there is a gap (a padding space?) between the background images which I cannot get rid of. Have you seen this issue with background images come up before in your layout?
(11.10.2008, 22:28)

EJ:-
Hi
Chrome does not seem to allow you to make the columns longer.
P.S.
Can I remind you rvwoens that tables are not meant for layout at all. They are meant for displaying data.
(29.12.2008, 13:17)

Sorin:-
Try resizing your browser window (Firefox 3.0) - you'll see the middle column shrinks but the text overlaps over the 3rd column.
(05.01.2009, 20:53)

Mark Graham:-
I'm sure this has done before but I'll send you my link. I use relative and absolute positioning and it works a treat in IE 7 and Moz Firefox 3.5. Haven't tested other browsers but will get round to it. Here's the link:

designcodetest.blogspot.com/2009/12/consistent-equal-height-columns-css.html
(04.12.2009, 21:16)

T. R. Tinker:-
Copyright? Copy-right? Oh lord, you can't claim a copyright on how you use methods that are in the public domain, Stu. I wish one could; we'd both be wealthy and would hire someone to do this for us while we sipped champagne and nibbles chocolate-covered cherries.

:o)
(28.12.2009, 19:06)

Stu:-
I do not see any copyright on this example?
(28.12.2009, 21:08)

Stu:-
..and if you are referring to the other demos on CSS play then the same applies to books. All words are in the public domain, it is how you put them together to write a book that is copyrighted, and so it is with html and css
(28.12.2009, 21:14)

on_datatex:-
the best solution:
www.datatex.org/the-best-solution-for-css-columns-with-equal-height.html
(09.05.2011, 11:57)

Mike N.:-
This does NOT work properly in IE8. It LOOKS WRONG. Column 1 and 2 are touching, and aligned left. Then there is a wide gap. Then the 3rd column is aligned right. It might need widths set.
(05.12.2011, 00:51)

Stu:-
It works in my version of IE8 8.0.7601.17514
But again this was produced way before IE8 was on the scene.
So if it doesn't work for you then do not use it...simple.
(05.12.2011, 08:07)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page