Comments on: 3 Column Fluid CSS Layout

By: Dave Woods

Dave Woods — Thu, 18 Mar 2010 10:31:31 +0000

Hi Karen, Do you have an example of the code you’re using for this so far or have it live anywhere so I can take a look?

By: Karen

Karen — Sat, 13 Mar 2010 22:29:36 +0000

Hello Dave,

I used your 3 column layout as a starting point for my web development last year.

This year I am trying to get my site active but wanted to make some changes due to the increasing mobile device use. During investigation it seems that “Document Order” is very important for mobiles.

I have tried to move the order of the columns so that “main content” will be a 1st priority. No matter what I try, the 3rd column drops to the bottom of the page…not beside the center column. It could be related to IE but I still need a solution.

Any thoughts about this?

By: 網站製作學習誌 » [Web] 連結分享

網站製作學習誌 » [Web] 連結分享 — Wed, 25 Nov 2009 02:45:02 +0000

[...] 3 Column Fluid CSS Layout [...]

By: MAH

MAH — Mon, 08 Jun 2009 15:39:46 +0000

Your own page has a problem with the text in the grey heading banner. It’s not all visible.

By: jenna

jenna — Tue, 10 Jun 2008 14:49:18 +0000

Dave,

Thanks for that code – have been looking all over for a simple explanation – and you had it.
Thanks again.

By: dbear

dbear — Sat, 15 Mar 2008 13:25:18 +0000

Thanks, Dave. A perfect gradient for a CSS newb to understand. In about a half hour, I gained a basic working knowledge of CSS and of how the parameters actually effect the layout. Much better than trying to get it out of the full technical manual where you don’t know what’s important and useful, and what can be left for later.

By: Dave Woods - HTML, CSS, Web Design » Min and Max Width 3 Column Fluid CSS Layout

Mon, 14 Jan 2008 11:19:59 +0000

[...] code for the main structure itself is covered in the 3 Column Fluid CSS Layout Tutorial so if you’re unsure of any of the basics of the layout then it may be a good idea to start [...]

By: Dave

Dave — Fri, 14 Dec 2007 23:03:52 +0000

I agree as was mentioned in one of my earlier comments. Either a min width should be applied or content should be placed in the middle column which stops it from getting smaller than a certain width.

I’d prefer to apply a min and max width to the overall container though personally but there are a number of options and this tutorial is aimed more at the beginner who is just starting out with CSS.

By: critic

critic — Fri, 14 Dec 2007 22:59:50 +0000

Not only is this basic but it is basically flawed. The middle column get totally mangled if the browser window is continuously reduced in size. Min width should be set on the middle column and integrity should be maintained.

By: Dave

Dave — Fri, 14 Dec 2007 08:37:01 +0000

Hi Jermayn, it’s an argument that’s been disputed numerous times and I’m not sure why you think it’s more semantic?

Personally, I prefer the code to be in the same order as it will be displayed otherwise you’re giving a different experience to users without CSS.

Also consider mobile users who may not have CSS support and have to scroll past the content to reach the navigation.

Then there’s the search engines. For a really long page, they may not index all the content and therefore you might find that they don’t even reach the navigation and therefore can’t follow these links to the sub-pages of your site meaning that only the homepage gets indexed.

That’s obviously just my personal opinion and I’ve seen it done the way you suggested many times as well.

Hope that makes sense?