homepage Welcome to WebmasterWorld Guest from 107.21.187.131
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Position Site Vertically
almo136




msg:3955206
 3:38 am on Jul 19, 2009 (gmt 0)

Hi,

I've just finished a small site which has a fixed height of 490px. The site is positioned in the centre horizontally but I would also like to position it in the center vertically.

How would I do this so it is positioned in the centre no matter what size of screen the user has?

Thanks.

 

vincevincevince




msg:3956266
 4:25 am on Jul 21, 2009 (gmt 0)

The easiest way; although it is distasteful, is to use a table...

Something like
<table height="100%"><tbody>
<tr><td>&nbsp;</td></tr>
<tr><td valign="middle">CONTENT</td></tr>
<tr><td>&nbsp;</td></tr>
</tbody></table>

swa66




msg:3956810
 8:23 pm on Jul 21, 2009 (gmt 0)

It's actually pretty easy in CSS too, without a table abused for layout.

The big question you need to answer first though is what do you want to happen if the viewport is smaller than the content ?

E.g.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%
}
body {
margin: 0 auto;
width: 770px;
min-height: 490px;
height: 100%;
position:relative;
}
#content {
position: absolute;
top: 50%;
margin-top: -245px; /* half the height */
background-color: red;
width: 100%;
height: 490px;
}
</style>
</head>
<body>
<div id="content">hello world</div>
</body>
</html>

I also centered in horizontally (that's what te width and the auto magind on body do.

To get this to work you need to create something (I used body) that's both 100% height of the viewport and has a minimal height of what you need. In addition you need to give that element position relative so that the abo#*$!ely positioned child uses it as a reference (and not the viewport -important should the viewport be too small)

The content itself is the absolutely positioned at halfway the height (top:50%) and the top is then moved back up by half the height (negative top margin).

That's basically all you need to get it working in FF, Safari, Opera, even IE (all latest versions).

Testing it in legacy IE versions left as an exercise to the reader (IE6 will have trouble with min-height, easiest is to throw in IE7.js )

almo136




msg:3956815
 8:31 pm on Jul 21, 2009 (gmt 0)

Thanks. If the viewpoint is smaller than the content won't the user just be forced to scroll (the same as they would with any content larger than the viewpoint?)

swa66




msg:3956859
 9:56 pm on Jul 21, 2009 (gmt 0)

With position:absolute you can easily break it when it's smaller than the viewport and scollbars aren't trivial to get. [they are in the example above.] Note that the body is made to be at least large enough to force the scrollbars from appearing and leave a large enough parent to position the content in even when it is smaller than the viewport.

This is probably a reason why so many think it's difficult to do. But the above should not break in a modern browser (it will in old IE versions I think, let us know if you can't figure out what to put in the conditional comments.)

swa66




msg:3956863
 10:01 pm on Jul 21, 2009 (gmt 0)

There are ather ways to center vertically in CSS:
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
height: 490px;
will do the trick just as well in a standards compliant browser (I think some legacy IE versions will throw a fit over this though, making it harder to get it to work there)

There are in most likely other ways too.

abidshahzad4u




msg:3957370
 3:46 pm on Jul 22, 2009 (gmt 0)

Thanks swa66.

The code above perfectly centered the div vertically in Firefox. How can I center it horizontally. I have tried
margin-left:auto; margin-right:auto;

swa66




msg:3957615
 9:18 pm on Jul 22, 2009 (gmt 0)

For a position:static or position relative element all that is needed it those margins and a width. So either you go that path (like I did in the earlier example) bu horizontally centering a parent and work off of that), or
you can also horizontally center an element that has position: absolute.
It's much the same as for the vertical centering:
either you do the left:50% ; margin-left: -Xpx; (where X is half the width), or you set both left and right to 0, do both margins as auto and set a width.

Note again that legacy IE versions won't be fond of setting both sides.

rob22




msg:3961182
 5:45 pm on Jul 28, 2009 (gmt 0)

<table height="100%"><tbody>
<tr><td>&nbsp;</td></tr>
<tr><td valign="middle">CONTENT</td></tr>
<tr><td>&nbsp;</td></tr>
</tbody></table>

What goes within the content?

Do the whole <body>all my div tags etc content</body> tag content go inside the CONTENT?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved