Centred fixed-width layout

MOH · 2008-02-27 19:08:50

Very basic question. I have a 3 fixed column layout which I want centred when the viewport is wider than the columns. Can I do this in CSS? Or do I need a script which I presume just sets the left of the containing whenever the window is resized?

27-02-2008 07:08PM

#1

MOH

Registered Users, Registered Users 2 Posts: 6,477 ✭✭✭

Join Date: October 2005

Posts: 5893

Very basic question. I have a 3 fixed column layout which I want centred when the viewport is wider than the columns. Can I do this in CSS? Or do I need a script which I presume just sets the left of the containing <div> whenever the window is resized?

0

Comments

#2 27-02-2008 07:11PM

egan007

Registered Users, Registered Users 2 Posts: 2,934 ✭✭✭

Join Date: January 2003

Posts: 2647

Just set the margins in the surrounding div as follows

#wrap {
margin:0px auto 0px auto;
}

0
#3 27-02-2008 07:37PM

MOH

Registered Users, Registered Users 2 Posts: 6,477 ✭✭✭

Join Date: October 2005

Posts: 5893

Ah brilliant, knew there had to be an easy way!

Thanks a million.

0
#4 27-02-2008 07:52PM

Gordon

Registered Users, Registered Users 2 Posts: 35,522 ✭✭✭✭

Join Date: July 2001

Posts: 34513

I think you have to add text-align:center for IE5/6 also.

0
#5 27-02-2008 08:22PM

egan007

Registered Users, Registered Users 2 Posts: 2,934 ✭✭✭

Join Date: January 2003

Posts: 2647

The above works fine across the board.
Use it all the time

0
#6 28-02-2008 12:59AM

DJB

Registered Users, Registered Users 2 Posts: 706 ✭✭✭

Join Date: April 2002

Posts: 652

or the shorter code of:

#wrap {margin: 0 auto;}

Not much shorter but I always like to use shorthand as much as possible. Yeah, it works across the board.

0
Advertisement
#7 28-02-2008 04:34AM
charybdis

Registered Users, Registered Users 2 Posts: 802 ✭✭✭

Join Date: January 2005

Posts: 778
Or skip the extra div:
body { width: whatever; margin-left: auto; }

0