Mobile Friendly Website


Doing it with style

Flexible Layout 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}

Post a comment

Current posts

(03.02.2009, 19:26)

Text and background in header dissapear and appear again when resize in IE6 browser window width.
(11.02.2009, 16:31)

I really like this one. Just one question: Why the max width of 1100px?
(12.02.2009, 20:03)

Just to show how it can be done. You can leave it out of the style if you want 100% width.
(12.02.2009, 20:24)

You're a genius!
(03.03.2009, 08:21)


line reading:

</div> <!-- end wrapperA -->

should read:

</div> <!-- end minMax -->
(06.03.2009, 00:26)

Pardon my ignorance, but one thing I don't understand: it says a minimum width of 800px, but when I look at the source, the minMax shows a minimum width of 700px. Where are the extra 50px on either side coming from?
(07.03.2009, 07:39)

Typing error, now corrected to 700px
(07.03.2009, 08:23)

Hello again.
I've added 'overflow:hidden;' to '#minMax', because otherwise there's a few metres of whitespace underneath the footer in Opera. (tested with versions 9.51 and 9.64)
(11.03.2009, 22:08)

How did you work out how much the offset for IE6 should be?

I have experimented trying to get 3 columns 25-50-25% but occasionally the middle column jumps down to start lower than the text in the right column
(24.03.2009, 15:33)

Don't worry I fixed it.

#topbar {width:50.6%;}
#outer5 {width:24.2%;}
so you have to add 0.6 to topbar
and subtract 0.8 from outer5

Thanks for sharing your code Stu
(25.03.2009, 12:16)

Max-width doesn't work in
IE 6.0 (6.00.2800.1106)
IE 6.0 (6.00.2900.2180)
(16.04.2009, 09:46)

(30.04.2009, 14:36)

Jim Haslip:-
This place amazes me.

Thank you Mr Nichols for all of your wisdom and more importantly, sharing it.
(29.05.2009, 15:21)

Erik Leo:-
Really nice demo. If any of you use the technique used here to make all columns reach the footer, and you have an element that has a position: absolute assigned, be aware your layout will break in Opera 10-beta. You will have a huge amount of whitespace beneath your page. This ONLY occurs in that browser, and as far as I know there is no fix.
(05.07.2009, 18:48)

Tom Byrnes:-
Stu: Outstanding site. I adapted this demo to get the columns that "go all the way down" effect. One nagging issue, however, and its a function of the "margin-bottom: huge; padding-bottom: -huge" trick: If the user jumps from a link within the page to another id/name within that same page, the display breaks. In mine, the top scrolls under the header (which does have some absolute positioning), and the bottom spills out under the footer (ditto). Any clues appreciated. Thanks again.
(23.07.2009, 08:39)

This looks good. A lot of learning. Esp in adjustments of columns.
(30.07.2009, 07:10)

DAB, it is 700px or at least I believe so. Where'd you see 800?
(01.09.2009, 15:29)

Did anyone succeeded in adaption this layout to left and right columns fixed width (say 240px) instead of %% ? I tried that, but immediately layout get broken :(
(14.09.2009, 03:54)

In IE6, resizing the window larger makes the top red banner disappear. Making the window smaller makes it appear.
(02.10.2009, 13:19)

Richard Posey:-
I'm blaming Microsoft and their "standards compliant" software for this, but this layout blows up horribly in Expression Web 2 and 3. The only reason I mention that is that my web team at a public library uses it (we get a discount ... Adobe won't give libraries discounts ... thank you, Microsoft, for that) ... the page looks great in Dreamweaver CS4 and all the main browsers. I'm wondering what Expression Web really has an issue with. I've seen some funky behavior in one our current CSS layouts.

THANK YOU for running this site, Stu.
(10.11.2009, 16:59)

Richard Posey:-
Got it ... this is what makes Expression Web freak out:

#outer1, #outer2, #outer3, #outer4, #outer5 {padding-bottom:32767px; margin-bottom:-32767px;}
(10.11.2009, 17:06)

(11.11.2009, 11:57)

Mr Nichols you are amazing
(06.12.2009, 13:28)

When the left column (#outer1) is shorter than, for example, any central or right block, these blocks will fall over the left column (#outer1)... any fix for this?
(18.01.2010, 16:14)

Very nice. Thanks Mr. Nicholls.
Question How would you set a topbar just the footer
(05.04.2010, 15:27)

As i have seen you where a programmer in the 1980's, and now your css is very nice and small you know your stuff stu
good work!
(27.05.2010, 15:40)

Elegantly simple! But how does one include an image (ie:header) that will fit when the header div resizes?
Thanks for an excellent resource site.
(23.07.2010, 20:21)

Works very well :)

Even in IE5. The only thing you forgot is adding text-align:center to body and text-align:left to the wrapper.
(07.11.2010, 00:34)

great example, thank you nicholas!! :)
(12.05.2011, 20:00)

Mike Avery:-
I really like this! However, if more than about 8 lines are in the top bar, the positioning of mid left, center and right bars breaks.

As a CSS newbies, I am scratching my head. I'm looking at greatness and wondering how it works, and why this one thing breaks.
(25.08.2012, 13:39)

Hello Stu, and thank you for your wonderful help. I have been trying to use this design, but I´m having great trouble if I try to attach to it a horizontal menu bar. I would appreciate some help.
(10.02.2013, 18:49)


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://'


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.


Facebook Twitter rss feed Facebook Fan Page