Comments on: 3-Column, Fixed Width Layout with CSS

By: ardiyasa

ardiyasa — Tue, 07 Jun 2011 07:15:05 +0000

thanks andrea this is my 1 i’m trying css very helpful..

By: Andrea Barnett

Andrea Barnett — Sat, 02 Apr 2011 12:45:59 +0000

* is a universal placeholder. It sets the margins and padding to EVERY SINGLE ELEMENT to zero.

m*.txt, for example, means every single text file that begins with ‘m’.

By: Zachary

Zachary — Wed, 30 Mar 2011 18:03:41 +0000

New to CSS and wondering what the “*” indicates in the 2nd section of example code above. Here it is in context:

* {
margin: 0;
padding: 0;
}

Does the * reference all elements, meaning any that have margin and padding attributes will have 0 as their value?

By: Gina

Gina — Tue, 21 Sep 2010 17:09:59 +0000

To provide more clarity…
The site is a five page site and each page will hold variable amounts of content in the ‘column-center’ areas. How do I write the coding in the external style sheet to allow for this flexibility with all three columns?

By: Gina

Gina — Tue, 21 Sep 2010 15:57:59 +0000

I have the same basic layout as described in the tutorial, but I have a problem…
The column-center is my content area, which will be variable in it’s height, so how do I make (or should I) the left and right columns expand accordingly so all three will be the same height?

By: Andrea Barnett

Andrea Barnett — Mon, 14 Jun 2010 10:45:53 +0000

That can be a bit complicated, as content likely changes from page to page. Look at Stef’s tutorial here: http://www.killersites.com/blog/2006/matching-div-heigths/

By: Vihar

Vihar — Sat, 12 Jun 2010 20:41:14 +0000

Dear Andrea,

first of all, thank you for running this great tutorial site!
My question is, can I set a pre-defined height for the columns, so when I don’t fill them up with text, they’ll be still showing up with the sizes I want?

By: William Rouse

William Rouse — Tue, 20 Apr 2010 01:45:58 +0000

Thanks for your response Andrea.
WBR

By: Andrea Barnett

Andrea Barnett — Mon, 19 Apr 2010 17:52:23 +0000

This tutorial only focused on the 3-column layout. However, margins to the ul or padding the containing div would get things in line. Note so if you add padding to the div, you’ll have to decrease its width by the sum of the right and left padding.

By: William Rouse

William Rouse — Mon, 19 Apr 2010 16:32:24 +0000

When I run your example on the four browsers that I use as test cases, IE8, Firefox, Safari and Chrome the bulleted items on the left side of the screen escape the container. How would one pull them inside of the container?
Thanks!
WBR