metalseb wrote:
Hi folks
I built up a small website which is designed for 800x600 display.
Runs just fine in this resolution but if you have a system in 1024 or
1280 pixels wide, the site just "sticks" in the upper-left corner of
the browser window. So I'm trying to keep it horizontally centered
whatever screen resolution you are set in. I do not want to deal with
table cells, just CSS.
I think that I must have a three column DIV layout with the center
one set to 800px fixed width. But I cannot find how to set the left
and the right one to -let's say- "the remaining width divided by 2".
[snip]
Are you saying that you want the page to fill the width of the viewport? Or
are you saying that you want a fixed-width layout (or a maximum-width layout)
which is centred if the viewport is wider than the layout?
I think you want to fill the width of the viewport. In which case, perhaps a
better way of thinking of it is to choose widths (numbers of pixels, or
percents) for the side-columns, and let the centre column use whatever it
left. That is a much-used layout, and there are sound (and simple) ways of
doing it. (At the moment, I can't think of a way to solve your "fixed centre
column plus 2 equal side columns" layout).
Suppose you want (for a bit of variety) a 200px left column and a 20% right
column. Then you can position those, using floats or absolute positioning.
Then don't attempt to position the centre column, just let it flow into place.
Give it large left and right margins, of (say) 210px & 21%, and its content
will avoid clashing with the side columns. If you choose 2 fixed sized side
columns, or 2 percent sized side columns, the change to the above is obvious.
If you want a "maximum-width" effect, where the whole display occupies the
width of the viewport until that becomes greater than X, then the layout
remains at X but centred, the easiest method I know is to use a single-cell
table. Give the cell (not the table) a width (not a max-width), and it will
act, even in IE, like max-width.
(I'm assuming you don't want a fixed-width but centred layout. That is easy,
but there is a trick needed for IE 5, involving { text-align: center } in the
body rule).
--
Barry Pearson
http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/