Forum Moderators: not2easy
My old layout is a 4 rows table that covers entire screen on widht and height. Is good because the table expands and content is distributed all along screen height, so the first row keeps near top of page, the footer stays near bottom of page and content, because they have a TR fixed in pixels.
Result: the rest of the table expands in vertical. Good.
Now tried the same effect in css and failed again and again.
Can somebody tell how to do that?
I saw this example but it doesn't force the table to center vertically:
<html lang="en">
<head>
<title>CSS - centering</TITLE>
<link rel="up" href="contents.html">
<script src="../quirksmode.js"></script>
<style>
<!--html,body {
margin: 0;
padding: 0;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
div {
border: 1px solid #000000;
}
div.container {
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 432px;
}
div.left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 432px;
}
div.top {
position: absolute;
top: 0px;
left: 200px;
width: 580px;
height: 150px;
}
div.main {
position: absolute;
top: 150px;
left: 200px;
width: 580px;
height: 282px;
}
-->
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div class="left">
Left content
</div>
<div class="top">
Top content
</div>
<div class="main">
Main content
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS
div.body {
border: #fff solid 1px;
height: 400px;
left: 50%;
margin-top: -200px;
margin-left: -400px;
position: absolute;
top: 50%;
width: 800px;
}
HTML
<div class="body">
The secret I think is that the margins (top/left) always have to be HALF of the height and width.
