I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some negative values inside of the #container but that sort of worked. I know CSS isn't supporting this yet?
Here is my markup:
body
{
background: #777; /* gray */
text-align: center;
}
#container
{
margin: 0 auto;
width: 968px;
text-align: left;
}
#toptab
{
background: #f77; /* red */
height: 14px;
width: 968px;
}
#middletab
{
background: #7f7; /* green */
width: 968px;
}
#data
{
width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
padding-left: 10px;
padding-right 10px;
}
#bottomtab
{
background: #77f; /* blue */
height: 14px;
width: 968px;
}
<div id="container">
<div id="toptab"></div>
<div id="middletab">
<div id="data">
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
The quick brown fox jumped over the big red bear.
</div>
</div>
<div id="bottomtab"></div>
</div>
See Question&Answers more detail:os