Mobile Friendly Website


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}

Post a comment

Current posts

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)

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)


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)

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

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

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

div class="content">
/div><!-- end #container -->

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

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)

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)

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

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

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)

10 of 42 comments (part 2). [ « ] [ » ] [ * ]


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