Stylesheets - having something in the middle of the screen.....

Author

having something in the middle of the screen.....

windandwaves

2007-07-21, 6:15 am

Hi,

I would like to position a site in the "middle" of the screen, both
horizontally and vertically.

I would do this by having a "wrapper" div with

{
left: 50%;
top: 50%;
margin-top: - [half the height];
margin-left: - [half the width];
}

This works fine, EXCEPT when the browser viewable area is smaller than
the width or the height of the wrapper. In this case, what I would
like to happen is that the wrappers sits against the top or the left
of the viewable area and that a scrollbar helps the user to see the
parts of the screen that are cut off.....

In the old days, with tables, you could achieve just this by having a
table as wrapper. The code goes something like this:

<table width="100%" height="100%">
<tr valign="middle">
<td align="center">
inner div with your actual website.....
</td>
</tr>
</table>

How can I achieve the ideas above without using a table???? or should
I just use a table.

Thank you

Ben C

2007-07-21, 6:15 am

On 2007-07-21, windandwaves <nfrancken@XXXXXXXXXX> wrote:
>
> Hi,
>
> I would like to position a site in the "middle" of the screen, both
> horizontally and vertically.
>
> I would do this by having a "wrapper" div with
>
> {
> left: 50%;
> top: 50%;
> margin-top: - [half the height];
> margin-left: - [half the width];
> }
>
> This works fine, EXCEPT when the browser viewable area is smaller than
> the width or the height of the wrapper. In this case, what I would
> like to happen is that the wrappers sits against the top or the left
> of the viewable area and that a scrollbar helps the user to see the
> parts of the screen that are cut off.....

You can take advantage of the rules for absolute positioning. In 10.6 or
thereabouts of the CSS 2.1 spec are a lot of rules about how to make all
the width and height properties (width and height themselves, plus
borders, padding, margins, and top, left, bottom and right) add up to
the containing width and height.

If the containing width is bigger than the total of what's been set-- in
the example below this is true whenever the viewport is wider than
400px-- then under certain circumstances the computed values of
margin-left and margin-right bring the width properties up to the
containing width by getting equal values each, resulting in the
centering you want.

But if the containing width is too small, the equation is satisfied by
subtracting from "right" (assuming you're going left to right) and
"bottom", i.e. the block ends up in the top left with scrollbars to the
bottom and right.

Try this example and then resize the viewport to smaller than 400x400:

<style type="text/css">
#wrapper
{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 400px;
height: 400px;
margin: auto;
background-color: green;
}
</style>

<body>
<div id="wrapper">
</div>
</body>

Bergamot

2007-07-21, 6:16 pm

Ben C wrote:
>
> position: absolute;
> left: 0; right: 0; top: 0; bottom: 0;

Note that IE doesn't grok this. IE6 doesn't for sure. I don't know if it
was fixed in IE7, but I suspect not.

--
Berg

windandwaves

2007-07-21, 10:16 pm

On Jul 21, 11:31 pm, Bergamot <berga...@visi.com> wrote:
> Ben C wrote:
>
>
> Note that IE doesn't grok this. IE6 doesn't for sure. I don't know if it
> was fixed in IE7, but I suspect not.
>
> --
> Berg

Hi,

Thanks for all your replies. I get the feeling that basically, the
best solution is to keep using the old table system, because if IE6
does not support it then you can't really use it yet - right?

Thank again for all your replies.

Nicolaas