Centering a div in Vertical

By , May 24, 2011 16:57 : the website is made from another crew, but the owner asked me to center the website vertically in the browser, and voila´

the idea is to give a vertical dimension of an empty div of 50% to get the middle of the height, and a margin bottom negative of the value of half of the height of the content DIV that need to be centered. That means that the content need a fixed height to be positioned.

here the code

<div class=”floater”> </div>
<div id=”content”>
Content here

/* floater is required to center the content wrapper in vertical*/
.floater {
border:1px solid transparent;
#content {/*main wrapper centered thanks to the 2 properties clear and position*/

height: 800px
The content is vertically center using this simple method, that I found in this  CSS blog ; but also if was declared as cross browser method,  the result was not working so well: with Firefox that was sometimes not rendering the floater as emptx div so that the content was jumping around, I  implemented the code adding an “invisible” border without background color to don´t let jump the div  and a min-height to preserve visibility on different screen size.

To make the border invisible I did not specified the color, or the color could be the same of the background.

NOW is a bit more cross browser 😉

If you work on small monitors and you are unsure if is working because the website is anyway higher then the browser, is enough to use CTRL –  to make the website proportions smaller.

Valid XHTML 1.0 Strict

Those are the regular cross browser tests we make : Internet exploder 6, 8, 9; Safari, Chrome, Opera, Firefox

on linux, mac and pc.

Monitors dimensions: 1920×1080, 1280×800, 4:3 and 16:9, netbook and Sony Ericson mobile Walkman and Android mobile phone
Nevertheless after we used our machines we let run some test on this web utility


Comments are closed

WordPress Open Source Blog System
SynOptX Lab Theme