Topic: Vertically centered box......help !!!! (Page 1 of 1)

I'm sorry, but I'm a CSS Newbie...and I have a problem.

I'm trying to horizontally and vertically centered a box with width of 600px and height of 700px, the problem is although I've managed to horizontally centered the box by using negative margin ( margin-left: 350px ), I can't do the same for the vertical centering.

The box seems to overlap the bowser so the bottom border is actually not visible.

I can't show you the site ( coz I haven't upload it yet ) but please help me, can you show me a better way to vertically centered that box, and forgive me for the crappy english, thx !!

sorry, here's the CSS code :

/* CSS Document */
body {margin:0px; padding:0px;}
#container {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
border: 1px solid;
margin-top:50px;
height:700px;
top:50%;
margin-top:-350px;
}

Please help, thx !

OK, first off, you have two "margin-top" declarations--the "margin-top:50px;" is extraneous, and gets overridden by the next declaration anyway. However, that's not your problem. The technique is sound and should work--in fact, it does work. Your problem is most likely that the height of the div is 700px, and even on a 1024x768 screen, that's going to end up being more vertical space than you have in the browser window.

Try this: reduce the height to 300px (or so), and then reduce the margin-top to 150px. Voila! We have centering.

If you can't get that to work, let me know. You're doing everything right (except for the extra margin-top declaration), so you shouldn't have any problems.


___________________________
Suho: www.liminality.org

Your code is pretty messy, so try this:

body {

   margin: 0px;

   padding: 0px;

}



#container {

   position: absolute;

   top: 50%;

   left: 50%;

   width: 600px;

   height: 700px;

   margin-left: -301px;

   margin-top: -351px;

   border: 1px solid;

}

You may also want to have a gander at this: http://faq.ozoneasylum.com/841/rating/

*Edit: Oooo, the shockmaster crept one in before me

"Nothin' like a pro-stabbin' from a pro." -Weadah

[This message has been edited by synax (edited 04-09-2004).]

Or, to make this layout type liquid, don't declare anything in terms of pixels. This is good for layout with absolute positioning that are only expected to work on one resolution, but it simply doesn't cut it elsewhere. Try declaring the width and height of your box as 50%, then having a margin-top of 25% and a margin-left of 25%. This puts the left hand side of your box a quarter of the browser window out, and so puts the center of your box exactly at the center of the browser window. The same thing goes for the top. This will then stretch vertically if the text overflows it, but still maintaining its position in the exact center of the window, no matter its size.

Justice 4 Pat Richard