Comments on: 2-Column, Center-aligned Fixed Width Layout with CSS

By: Nathan Schobert

Nathan Schobert — Tue, 25 Oct 2011 19:47:27 +0000

I’ve been trying to make a simple two column layout for some time now, but I could never get the thing to center, what with the floats and fluid containers. I didn’t want to use absolute sizes because now if I change the padding, margins, or borders on the two columns, I have to readjust the sizes. Minor inconvenience I suppose, at least I finally have something workable. Thank you

By: Andrea Barnett

Andrea Barnett — Sun, 12 Jun 2011 12:08:14 +0000

Actually, header, etc are INSIDE the wrapper and the divisions just appear in their natural order, as I didn’t use CSS to direct them otherwise.

By: rajim

rajim — Sun, 12 Jun 2011 03:18:20 +0000

Pardon, i’m new on css and have a doubt with #header
in this tutorial, i didn’t see any #header css tag declared #header position, so how can it position automatically on top ? or above navigation and content.

i guess, header position set at html, below wrapper and above navigation and main content ? correct me if wrong

Thank you

By: Sumi

Sumi — Tue, 01 Feb 2011 12:03:05 +0000

Excellent tutorial….Put everything that was scattered all around in my head ordered into one place…..Thank you.

By: Andrea Barnett

Andrea Barnett — Fri, 31 Dec 2010 00:47:58 +0000

Thanks for the pointer, Nit Picker, I’ve made the wrapper issue a bit clearer and expanded on the sample coding shown. Does this help, or do you have more questions?

By: Nit Picker

Nit Picker — Thu, 30 Dec 2010 20:21:29 +0000

Hi, sorry to say the tutorial does not show in the sections of example code where to put the #wrapper div. Yes, maybe it is obvious, but for the sake of a tutorial I would hope for at least a verbal explanation. The closest I find is ‘…I’m adding a wrapper division around the entire body html…’.

Thanks!

By: Ashley R

Ashley R — Mon, 18 Oct 2010 21:06:48 +0000

Hi! Thanks for the tutorial; it was very helpful. I do have a question though – how can you make the navigation bar expand down the page 100%?
I am working on a site (although I’m a CSS newb) which I have a navigation bar that extends about half-way down the pages. This is ok and looks right for my home page where the content also only goes half-way down, but on other pages, the content extends farther than the length of the navigation bar. I would like the color of the navigation bar to extend all the way down the page. I tried
height:100%;
but this did not work. Any help? Thanks.

By: Gopal rajawat

Gopal rajawat — Tue, 06 Apr 2010 19:16:55 +0000

Thanks, great tutorials i am looking for this and i got it….

By: Michael Hall

Michael Hall — Fri, 12 Mar 2010 00:31:32 +0000

Excellent tutorial and indeed easy to understand.

can you also give us a tutorial covering the box model issue with IE when you have some spare time? I just can’t seem to wrap my head around that, lol.

By: Gary

Gary — Tue, 02 Mar 2010 12:29:08 +0000

Hi, excellent tutorial.

One thing i “need” to know, how do you make the “wrapper” float vertically also? Say I have a background 600px high and I want it to float vertically?