ansaurus

Question

Table cell doesn't obey vertical-align CSS declaration when it contains a floated element

Answer 1

+1 A:

Sorry, no clue why it does that.

But could you change it to the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>
           <table><tr><td style='border: 0px;'><h1>1</h1></td><td style='border: 0px;'>
           The quick brown fox jumps over the lazy dog.</td></tr></table></td>
        <td>The quick brown fox jumps over the lazy dog.</td>
    </tr>
</table>
</body></html>

I know it's ugly - but it works.

George Edison 2010-04-14 23:12:38

I tried that and it works. I would prefer a more elegant way, but I may have to do this.

mikez302 2010-04-14 23:38:24

Answer 2

+3 A:

It's because the <h1> element is a block element and the casual text is inline. So you have to force <h1> to behave like an inline element, which by the way, means no floating.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<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; font-size: 12px}
h1{
   display:inline;font-size: 40px;vertical-align: middle;}
</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>

Oh and BTW - do NOT use tables for layout. It's old, it's ugly, it's not worth it.

dare2be 2010-04-14 23:24:25

Good job. Don't know why that didn't work for me... probably I was missing the `align:middle` part.

George Edison 2010-04-14 23:26:37

Thank you. I tried this and it seems to work. However, if the small text wraps onto more than one line, it looks funny. Instead of being vertically aligned, it goes under the h1. I can post an example if you want.

mikez302 2010-04-14 23:39:13

By default, text will wrap around floated elements.

George Edison 2010-04-14 23:47:17

I generally don't like using tables for layout, but I am trying to make the boxes have equal height, and it really seems like the simplest way to do this that works reliably in all the popular browsers.

mikez302 2010-04-15 18:32:29

Glad it worked but please choose some answer or it'll keep coming up as 'Unanswered'

dare2be 2010-04-29 15:11:56

ansaurus

tags:

views:

answers:

Table cell doesn't obey vertical-align CSS declaration when it contains a floated element

related questions