Centering a div in Vertical

By , May 24, 2011 16:57

Sprachkurier.de : 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

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

CSS
/* floater is required to center the content wrapper in vertical*/
.floater {
float:left;
height:50%;
min-height:120px;
margin-bottom:-400px;
border:1px solid transparent;
}
#content {/*main wrapper centered thanks to the 2 properties clear and position*/
clear:both;
position:relative;

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 http://browsershots.org/

———————————————————————————————————

categories CSS Styles, WebDevelopment

Comments are closed

WordPress Open Source Blog System
SynOptX Lab Theme