Three column web design with variable sides

Question

I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically.

I haven't been able to get this working properly in all current browsers. Any tips on this?

Jim · Accepted Answer · 2008-09-16T22:08:48.500

2

Use this technique, and simply specify a fixed width for the centre column.

edited Sep 16 '08 at 22:08

answered Sep 16 '08 at 14:43

Jim

72,985
14
101
108

Thanks, that seems to do it. Now I'm going to figure out why you need so many nested divs. – neuroguy123 Sep 16 '08 at 15:13
I'm getting a 404 when I try to check that link... do you need to edit the html? – Sam Murray-Sutton Sep 16 '08 at 21:33
Thanks for pointing that out. The page moved from .html to .htm for some reason. I've updated the link now. – Jim Sep 16 '08 at 22:10

score 1 · Answer 2 · edited Aug 28 '20 at 11:21

1

Check this out: http://www.glish.com/css/2.asp

And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?

#maincenter {
  width: 200px;
  float: left;
  background: #fff;
  padding-bottom: 10px;
}

edited Aug 28 '20 at 11:21

Ritu

714
6
14

answered Sep 16 '08 at 14:48

David Cumps

575
4
18

+1 thanks Dude. Because Your comment used to me from Here (http://stackoverflow.com/questions/2630430/how-to-set-pdf-paragraph-or-font-line-height-with-itextsharp). – RajeshKdev Apr 10 '13 at 14:29

score 0 · Answer 3 · answered Sep 16 '08 at 14:48

0

I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.

sidebar width = (window width - center column width) / 2

You could then reapply the javascript if the window is resized.

answered Sep 16 '08 at 14:48

Adam Hopkinson

28,281
7
65
99

I guess this would depend on whether or not you want your site to display the same when people turn javascript off. That's another question though. – neuroguy123 Sep 16 '08 at 14:57

score 0 · Answer 4 · answered Sep 16 '08 at 15:58

This article at A List Apart has a solution resulting in a 3-column layout that will :

have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal patches.

Three column web design with variable sides

4 Answers4

Linked