Comments on: 2 Column Fluid CSS Layout

By: M Hutchinson

M Hutchinson — Thu, 04 Dec 2008 13:21:12 +0000

I noticed that your profile in the grey banner near the top of the page doesn’t fit in the height of the row. Also, I thought it was best practice to hide contact email addresses due to spam ?

By: Dave

Dave — Tue, 11 Mar 2008 22:10:10 +0000

Hi James. Yes very easily. Just change the float: left; on the navigation to float: right; and then change the margin on the content to right instead of left and it’ll switch the columns over without needing to change anything in the HTML.

Hope that’s what you’re after?

By: James P

James P — Tue, 11 Mar 2008 21:46:39 +0000

Hi, thanks for this great post. Is there a simple way to flip the narrow column to the right hand side of the page?

By: Dorothy

Dorothy — Sat, 01 Mar 2008 19:23:00 +0000

Great post. I have been designing using CSS exclusively, but all of my designs are of a centered fixed width. I am going to use this tutorial to learn fluid designs.

By: Dave

Dave — Mon, 18 Feb 2008 14:20:38 +0000

Sounds like you have a problem with clearing float’s?

You might find the following article of use to your particular problem.

http://www.dave-woods.co.uk/?p=133

If that doesn’t help, feel free to contact me via the details on the “contact” page of this site.

By: Bor

Bor — Sun, 17 Feb 2008 14:02:21 +0000

Hi,

This was a greate article!! I have however a problem when I try this demo. And I am hoping that you might solve that problem for me.

Problem: The footer-div goes behind the navigation-ul when the list in the navigation-ul is bigger than the text in content-div.

Can you give me some advice, please?

Best regards,
Bor

By: Dave

Dave — Wed, 12 Dec 2007 08:42:26 +0000

Hi Brian, The columns will usually load in the same order that they appear in the source code.

In the template above, if you wanted the navigation to load first but appear on the right, you’d simply swap the float to right and change the margin on the #content div to margin-right instead of left and it should be that simple.

Personally, I’d usually have the source code in the same order as the display so that anyone without CSS or using mobile devices will get the same experience as those using the latest browsers.

Hope that helps.

By: Brian

Brian — Tue, 11 Dec 2007 23:13:28 +0000

This is a top notch post because of its direct simplicity. Thanks.

I use a kludged blogger template that functions OK, but my head is swimming because I cannot seem to understand the order that columns load. My sidebar loads first, causing a very poor experience for visitors. But when I try to flip the code around, the template gets screwy!

How does this styling handle the load ordering?

By: Dave Woods - HTML, CSS, Web Design » 3 Column Fluid CSS Layout

Dave Woods - HTML, CSS, Web Design » 3 Column Fluid CSS Layout — Mon, 10 Dec 2007 11:19:30 +0000

[...] you haven’t already had a look at the 2 Column Fluid CSS Layout tutorial then you may want to work through that one first as this tutorial is only a slight [...]

By: Dave

Dave — Mon, 10 Dec 2007 08:42:40 +0000

Hi Jermayn. Yeah, I think we’ve all done it at some point especially when first starting out with CSS as it’s common place with tables to apply a width to everything which is a difficult mindset to switch out of when transferring to CSS and tableless layouts.