By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

div always centered horizontally in browser window

P: n/a
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".

I struggle since a while with google now and I cannot find a way to the
solution. Perhaps I'm a bit tired and fed up now and I'm not searching the
right way.

Any help would be greatly appreciated

Regards !

--
Seb
Metal extrême, gothique et atmosphérique
http://www.metal-extreme.com
The Unholy Black Metal Songtitle-O-Matic
http://metalseb.free.fr
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Fri, 2 Apr 2004 16:05:55 +0200, metalseb <me******@free.fr> 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".

I struggle since a while with google now and I cannot find a way to the
solution. Perhaps I'm a bit tired and fed up now and I'm not searching
the
right way.


There are a few solutions to your dilemma.

One is to center the 800px (actually less, since you need to leave a bit
of room for browser frame and scrollbar) div inside a wrapping div. Style
the inside div margin: 0 auto;

Another is to allow the design to fluidly flex to the size of the
viewport. This is preferred by many, as it takes advantage of screen real
estate. In most cases this is easier and yields better results. Just
remove the width: 800px completely, by default divs will take up all
available width.
Jul 20 '05 #2

P: n/a
"metalseb" <me******@free.fr> wrote:
I built up a small website which is designed for 800x600 display.
Oh dear.
Runs just fine in this resolution
Presuming I have my browser window maximised and no sidebars open,
right?
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.
Yup, that's one of the problems with such a design. Another one is the
horizontal scrolling encountered by anyone who has browser window
narrower than 800 pixels wide.
So I'm trying to keep it horizontally centered whatever screen resolution
you are set in.
Why not make the design use the available space rather than waste it?
I do not want to deal with table cells, just CSS.
Okay.
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".


No.

body {text-align: center;} /* for IE */
div.everything {
margin-left: auto; /* for better browsers */
margin-right: auto;
width: 800px;
text-align: left; /* so the content itself isn't centered
within the div */
}

<body>
<div class="everything">
your whole fixed width site
</div>
</body>

But better still would be to use a liquid design that adapts itself to
the available space.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a
Neal, Steve, Barry

Thanks for you help and remarks. This helped me to think about the site
layout in a different way. I think that I will head forward to a liquid
layout in a few days but for the moment, il will stick up to the (yukky)
"centered 800x600 popup way" because the original design, as wanted by the
customer, is a bit hard to "liquidify" and will need some extra graphic work

Kind regards

--
Seb
Metal extrême, gothique et atmosphérique
http://www.metal-extreme.com
The Unholy Black Metal Songtitle-O-Matic
http://metalseb.free.fr
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.