Table cell doesn't obey vertical-align CSS declaration when it contains a floated element
- by mikez302
I am trying to create a table, where each cell contains a big floated h1 on the left side, and a larger amount of small text to the right of the big text, vertically centered.
However, the small text is showing up at the top of each cell, despite that it has a "vertical-align: middle" declaration. When I remove the big floated element, everything looks fine. I tested it in recent versions of IE, Firefox, and Safari, and this happened in every case.
Why is this happening? Does anyone know of a way around it? Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>vertical-align test</title>
<style type="text/css">
td {
border: solid black 1px; vertical-align: middle; font-size: 12px}
h1 {
font-size: 40px; float: left}
</style>
</head>
<body>
<table>
<tr>
<td><h1>1</h1>The quick brown fox jumps over the lazy dog.</td>
<td>The quick brown fox jumps over the lazy dog.</td>
</tr>
</table>
</body></html>
Notice that the small text in the first cell is at the top for some reason, but the text in the 2nd cell is vertically centered.
