 | |
div always centered horizontally in browser window
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
div always centered horizontally in browser window -
04-02-2004
, 09:05 AM
#2
| |||
| |||
|
|
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. |
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.
#3
| ||||||
| ||||||
|
|
I built up a small website which is designed for 800x600 display. |
Quote:
|
Runs just fine in this resolution |
right?
Quote:
|
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. |
horizontal scrolling encountered by anyone who has browser window
narrower than 800 pixels wide.
Quote:
|
So I'm trying to keep it horizontally centered whatever screen resolution you are set in. |
Quote:
|
I do not want to deal with table cells, just CSS. |
Quote:
|
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". |
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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>
#4
| |||
| |||
|
|
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/
#5
| |||
| |||
|
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.