CSS

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.

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)

10 of 29 comments (part 1). [ » ] [ * ]

Post

Thanks to Alex for this script.