Mobile Friendly Website

CSSPLAY

Doing it with style

Flexible 3Cols 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

Tim:-
Is there a way to remove the footer and make the 3 columns extend down?
(04.02.2009, 20:21)

Oleg:-
"3 columns one fixed width" with "Center 200px".
In IE6 there is dark gray right border on "Right 'rest'%" column. This border appear in case of changing browser window widht.
(11.02.2009, 15:43)

Stu:-
This is because IE6 does not reduce percentage width smoothly. I have fixed this by making the right column background the same color as the container background.
(11.02.2009, 15:53)

Wes:-
Stu thank you for having such a useful site! :-) Wish I had found your site sooner.

I took this example and wanted change it to use background images for all 3 columns and have a border on the columns. The border worked in IE7.0 but didn't work in Firefox 3.06. Firefox was willing to display a border around an entire column (border:) but would not draw a single side border (border-left:). I found out that it was choking on the large padding/margin and that a slightly smaller one will work.

/* Firefox messes up borders */
padding-bottom: 32767px;
margin-bottom: -32767px;
/* Firefox likes */
padding-bottom: 32317px;
margin-bottom: -32317px;

Also IE7 would only expand the center column and display its background image as wide as needed for the wrapped text leaving a gap. I fixed this by changing the conditional IE style to not apply to IE7 and then adding <div style="clear:both;height:1px;"></div> to the bottom of the center column.

Now it works just like I want for FF3 and IE7. [no clue what my hack looks like in IE6].
(17.02.2009, 20:24)

vva:-
How would you deal with content in the central column that just won't break? A wide table is a real problem with this layout. Is it possible to make it force the width of the entire page rather than hide content or mess up the layout. I tried an inner div with overflow:scroll, but that forces the scrollbars to show.
(04.03.2009, 08:10)

BG:-
How would you make center and right column equal in size?
(11.03.2009, 03:05)

Gerrit-Jan:-
[Quote Stu] This is because IE6 does not reduce percentage width smoothly. I have fixed this by making the right column background the same color as the container background. [Unquote]
I've noticed that IE fills up the right div up to the end of the rightmost text, leaving a stripe of background colour of the container visible (coloured different for this purpose). I've been fiddling with this and googling for hacks but haven't found one so far. Do you know of a way to trick IE into expanding the right column to the end of the container div, just like in the other major browsers?
(12.03.2009, 21:15)

Gerrit-Jan:-
I've found a trick.
I've inserted a 100% wide and 1px high image in the html code of the right div. That solved it!
(12.03.2009, 22:30)

Richie:-
wowowwowo.. amazing website! I hope the people submitting this code are being paid well for there skills, they deserve it..
(15.03.2009, 04:44)

Stu:-
Only one person producing all of the demos on CSSplay and that's me, Stu :)
(19.03.2009, 14:31)

Alicroche:-
Does the 32767 number have mystical or astrological correlations (With IE for example)? I mean, may I use another number for margin and padding bottoms ? Because it breaks my layout in Chrome 1.0.154.48 : One of my columns has a background image with repeat-y. With 32767 It doesn't display, with 22767 (ceteris paribus) it does...
(20.03.2009, 13:26)

Patric:-
TEst ing to post again as the post I did won't get through...
(23.03.2009, 14:05)

Patric:-
Hey, Stu... long time since I herrassed you now ;)

Ok, I will have another go... I have a Q for you... the three columned all percent layout (ontop) uses "word-wrap:break-word;" in the CSS... Now this do not validate... So valid CSS link isn't so valid. I want that for some reason. Is that IE7 and IE6 comments in index sufficient or does this need to be in CSS ?
(23.03.2009, 14:06)

mat:-
stu, there seems to be a problem with your code - could be me however.

I'm working with the fix flex fix layout. Whenever I try to clear div's within the center column, they move all content below the left or right columns - depending which is longer.

Surely the center columns content should be independant of the left & right ones ?
(18.04.2009, 14:28)

Gaston:-
Thanks so much for this Stu! All your css samples are awesome!

Alicroche, i'm having the same problem.
When using background images in the menus or content divs Chrome, for some reason, doesn't show them in the correct position.
If you remove the bottom margin and padding it will work but your colums will not reach the footer unless they are pushed by content.
(23.04.2009, 02:02)

Sergey:-
Hey! guy's!

I want to use same %width for all 3 colums (not 20-60-20)

Please help me by code.

Respect cssplay from Russia, Saint-Petersburg!
(27.04.2009, 01:14)

goatlady:-
Stu, I Would Like to use this for my website and am asking permission
(01.05.2009, 14:34)

AC:-
How do you get the code?
(07.05.2009, 03:04)

AC:-
Is there a code WITHOUT iframes?
(07.05.2009, 03:31)

Sebi:-
It just won't work, everything is fine with 3 colums, but when I want to put a footer row as a middle column under it, I get confused over it, check it out at www.taxi-reh.de. There I tried to succed, but still wor ahead.
(19.05.2009, 14:09)

geremi:-
dont u have 2column pages? or just tutorials on css float and clear properties/ will appreceiate a response. thx.
(23.06.2009, 17:34)

Allan:-
Flexible equal height 3 columns
The center column fails to give a left padding
in firefox.
I tryed this and it works but there must be another way ??

#outer2{
background-color: #e0e0e0;
background-repeat: repeat;
background-attachment: scroll;
margin-left: 230px;
/*Changed from 210 to 230 for firefox*/
margin-right: 220px;
/*Changed from 210 to 220 for firefox*/
margin-top: 10px;
margin-bottom: 10px;
background-position: 0% 50%;
}
Thanks Allan
(26.08.2009, 14:34)

Shane Bishop:-
On my site, this seemed to not work if the center column had the 32767 pixel fix to go the full length. This was only in IE8 compatibility mode (only way I have for testing old browsers), so who knows if it's even valid. On the sidebars, the 32767 pixel setting works great, and works for me. Just thought I'd share.
(16.10.2009, 20:41)

Shane Bishop:-
should have also mentioned, that Stu's original example works fine in IE8 compatibility mode, so it's got to be a quirk with my site, but I can't find it.
(16.10.2009, 20:42)

Mike:-
This examples on this site have been really useful. I've been working with this 3 column layout (one fixed), trying to use it for a site. The one problem I keep bashing my head into is that if a page has very little content in the central section, then in IE the width is very narrow and there is dead space between the central section and the right sidebar. The easiest fixes lead to either overflow of content from the central section into the right sidebar once it gets below the last of the sidebar content or you lose all height control and all three sections are at a minumum height, regardless of the content. Finally, I came up with this, which works in IE7 and Chrome on XP.

I'll post the css and html in further posts due to the character limit
(20.11.2009, 12:20)

Mike:-
CSS:

body {font-size:76%; font-family: verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}

#widthcontrol {min-width:700px; max-width: 1280px; margin:0 auto; background-color: #ffffff;}

#header {background:#a31e39;}

#left_sidebar{float:left; width:180px; background:#e0d0d0;}
#right_sidebar {float:right; width:20%; background:#c0c0c0;}

#left_sidebar, #right_sidebar {padding-bottom:32767px; margin-bottom:-32767px;}

#container {overflow:hidden; background:#e0e0e0;}

#footer {clear:both; background:#455c5a;}

.spacing {padding:10px;}

.content {margin-right:20%; padding:10px 10px 10px 200px;}
(20.11.2009, 12:21)

Mike:-
div id="widthcontrol">
div id="header">
div class="spacing">
h1>Site Header</h1>
p>Stuff</p>
/div>
/div> <!-- end header -->

div id="container">
div id="left_sidebar">
div class="spacing">
h2>Left Sidebar</h2>
p>Stuff</p>
/div>
/div> <!-- end left sidebar -->

div id="right_sidebar">
div class="spacing">
h2>Right Sidebar</h2>
p>Stuff</p>
/div>
/div> <!-- end right sidebar -->

div class="content">
h2>Middle</h2>
p>Stuff</p>
/div>
/div><!-- end #container -->

div id="footer">
div class="spacing">
p>Stuff</p>
/div>
/div> <!-- end footer -->
/div> <!-- end widthcontrol -->
(20.11.2009, 12:28)

Allen:-
Anyone know why if you try to break out the CSS code from the HTML, the left column no longer works correctly. It comes to rest under the two right columns rather than maintaining its position,
(14.01.2010, 04:02)

Amy:-
Thanks for the great layouts! However, I did just find out that the negative margin on the divs is causing links to named anchors to work incorrectly -- hiding all content above the anchor instead of "scrolling" to it.
(13.04.2010, 21:02)

About:-
@sebi: position header, mid-section and footer relative.
(05.10.2010, 12:33)

Jeremy:-
@Amy: try encapsulating the anchor in a div with position:absolute. This works in IE and FF but not in Chrome and Safari - still searching for a solution for the latter two. Opera seems to be the only browser I've tested that handles the anchors properly without the positioning.
(16.12.2010, 20:23)

ellen:-
does not work at all in firefox 3.6 using this exact code. the three 'columns' fall one under the other instead of spreading to fill the page, quirks mode or not does not matter. what i am looking for is a clean way to do this, with felxibility. i have lots of messy code fixes and was hoping not to have to use any of that. using fixed or absolute makes the layout useless for ipad users. frustrating.
(18.02.2011, 19:40)

Stu:-
Works perfectly in my Firefox 3.6.13
(18.02.2011, 19:48)

Patrick:-
Thanks for this awaysome demo Layout !

But a have a question is it possible to set a fixed height to header and footer and strech the main content to 100% browser height ?

Thanks
(16.03.2012, 19:17)

steffy:-
nice post
(19.10.2012, 08:12)

MikeAvery:-
I used this layout, with the smaller columns on the left and right, and it looks great!

Until I try to print it. It delivers 3 pages with Firefox 16.0.1. On your demo site, it produces 2 pages. In both cases, one would suffice.

While Chrome and Safari print the layout as expected, Internet Explorer 7, 8 and 9 produce 25 to 38 pages. 38 using IE 9 on your demo page at www.cssplay.co.uk/layouts/flexible-3column.html,

Do you have any idea what is going on here?

Thanks,
Mike
(26.10.2012, 04:16)

Stu:-
You will need to produce a print.css stylesheet to format the printing as you want it.
(26.10.2012, 08:05)

MikeAvery:-
Actually, I've already tried that. I'd hoped for somewhat more concrete assistance.

Do you have any idea what is triggering all the spurious page feeds so I'll know how to avoid them?
(26.10.2012, 13:19)

Stu:-
The page feeds are probably being caused by the bottom paddings and margins which are used to get the columns the same height:
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
(26.10.2012, 22:11)

MikeAvery:-
Thank you Stu! I'd wondered about the padding. Now it's time to experiment!
(31.10.2012, 01:40)

MikeAvery:-
That did it! Thanks for the pointer!
(31.10.2012, 02:30)

michael:-
genau das habe ich gesucht, es ist das Beste das ich gesucht hatte,

danke

Michael

aus deutschland
(14.09.2014, 10:52)



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