Comments on: 3 Column Fluid CSS Layout

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?

By: Jermayn Parker

Jermayn Parker — Fri, 14 Dec 2007 01:03:27 +0000

I like it alot, as you say there are heaps and heaps of tuts that are twice as complicated!!

The only thing I would suggest to change is the order of the left side and the content divs. I prefer having the content first as its more semantic.

By: Dave

Dave — Thu, 13 Dec 2007 11:48:07 +0000

I completely agree with everything that’s written in the linked article. However, fluid layout doesn’t mean 100%.

Fluid layouts should allow the layout to expand and contract but they shouldn’t take any control away from the designer or make the site any less usable.

As I mentioned in the comment above yours, we can set rules so that a page has a certain region that it can expand and contract between.

If your design doesn’t work well under 600px then set a min-width: 600px; on the container.

At the same time, if the line length becomes too long then you can set a max-width so that the content doesn’t become wider than this.

Whilst max and min width aren’t supported in IE6 and below there are other methods that can be used which will ensure the designer still has enough control to ensure the site is usable.

Hope that helps?