Though there is a CSS property vertical-align, it doesn't work like attribute valign in HTML tables. So, we need to think about other ways to fix this issue. We can solve this issue by using absolute position.
.wrapper{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
This works only with defined height and when div height is less then browser height so you can't have scroll. What about larger heights? answer is simple.
In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
margin:0px auto;
padding:0;
}
div#wrapper {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}
div#container {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#wrapper {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
</style>
</head>
<body>
<div id="wrapper"/></div>
<div id="container">
Content
</div>
</body>
</html>
No comments:
Post a Comment