100% height table and columns

Hello,

I have 3 divs with height:100% of screen. If one of them is heigher then two remaining divs does not extending. Wrapper of them have to be centered. Here is the code of my example:


<html>
<head>
</head>
<body style="height:100%;">
<div style="margin-left:auto; position:relative; margin-right:auto; width:960px; height:100%; border:1px solid black;">
<div style="display:table-cell; min-height:100%; height:auto; width:100px;float:left;border:1px solid green;">
1
</div>
<div style="display:table-cell; min-height:100%;height:auto;float:left;border:1px solid black;">
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>huj<br>
</div>
<div style="display:table-cell; min-height:100%;height:auto; width:100px; float:right;border:1px solid black;">
3
</div>
</div>
</body>
</html>

I will be grateful of any help.
Best regards,
Jan Grzdyl

[edited by: alt131 at 8:17 pm (utc) on May 17, 2011]
[edit reason] Side Scroll [/edit]

100% height table and columns

display: table

jangrzdyl

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week