: What width should the center column be in a 3 column layout? Monitors have gotten wider over time and as a result webpages have had an ever-widening center column. What is the current recommendation

@Shanna517

I'd suggest that your central column should be (approximately) half the screen width, up to a maximum. If you have one sidebar, you could go a bit wider; with two sidebars, a bit less - depending on what you have in the sidebars, of course.

But, please keep it a proportional value instead of a fixed one.

Like many others, I've spent the money (at home) or begged the boss (at work) for a nice high resolution screen, or two, so that I can read more at one time. Fixed width layouts penalize both those with higher resolutions (wasted screen space) and those with lower (horizontal scrollbars).

To illustrate ...

My laptop runs native resolution 1920x1200 - nice, clear, plenty of room, lots of space to put content for reading.

But, when I browse to a site using a 960 pixel fixed width, I have one of two problems.

Either I maximize my browser, leaving half my screen completely whitespace:



Or if I put two browsers side by side, the content is clipped and I have to monkey around with a horizontal scroll bar as I read:



The kicker is this: it's entirely unnecessary to cause these problems. It's perfectly possible to create fluid width layouts with constraints to prevent things going too wide or too narrow (there are plenty of sites that do just this).

Vote Up Vote Down

@Cofer257

There is no "recommendation" for specifically the center column, that would be odd.

Many sites nowadays stick to a maximum of 1000 pixels for the entire site width (for 1024x768 resolution screens). IMO wider than that is not all that useful anyway, since lines of text can before too long to read comfortably (like Wikipedia, which uses a fluid layout).

The majority of CSS grid frameworks use 960 pixels, then it's up to you how many columns you use for the sidebars/center.

I check Google Analytics occasionally to see what resolutions my visitors are using. 800x600 doesn't even feature on the top 10 resolutions. Apart from 320x396 (which is obviously a mobile browser) the lowest resolution is 1024x768 (18%).

Vote Up Vote Down

@Sarah324

As discussed in this question it's not monitor size that matters. It's browser size/resolution. Someone may have a very wide monitor but only keep their browser open to half its width.

Your best bet is to design the middle column to grow and shrink depending on browser size. Using the min/max-width CSS properties should give it the constraints you're looking for.

Vote Up Vote Down