Floated Divs Obeying/Not Obeying Vertical-Align

Question

Within a table cell that is vertical-align:bottom, I have one or two divs. Each div is floated right.
Supposedly, the divs should not align to the bottom, but they do (which I don't understand, but is good).
However, when I have two floated divs in the cell, they align themselves to the same top line.
I want the first, smaller, div to sit all the way at the bottom. Another acceptable solution is to make it full height of the table cell.

It's difficult to explain, so here's the code:

<style type="text/css"> 
table {
   border-collapse: collapse;
}
td {
   border:1px solid black;
   vertical-align:bottom;
}
.h {
   float:right;
   background: #FFFFCC;
}
.ha {
   float:right;
   background: #FFCCFF;
}
</style> 

<table> 
  <tr> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2<br />Line 3</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
  </tr> 
</table>

Here are the problems:

1. Why does the @ sign sit at the same level as the yellow div?
2. Supposedly vertical-align doesn't apply to block elements (like a floated div) 1. But it does!
3. How can I make the @ sit at the bottom or make it full height of the table cell?

I am testing in IE7 and FF2. Target support is IE6/7, FF2/3.

Clarification: The goal is to have the red @ on the bottom line of the table cell, next to the yellow box. Using clear on either div will put them on different lines. Additionally, the cells can have variable lines of text - therefore, line-height will not help.

Answer 1

Add clear: both to the second element. If you want to @ to be below the yellow box, put it last in HTML code.

Answer 2

If you don't want both divs on the same line then don't float them both right. If you put the @ below the text in the markup and then set the float to 'clear' it would put it below the text.

Answer 3

i've found this article to be extremely useful in understanding and troubleshooting vertical-align:

Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 4

http://www.w3.org/TR/CSS2/visudet.html#line-height

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

There is always confusion about the vertical-align property in CSS, because in most cases it doesn't do what you expect it to do. This is because it isn't the same as valign, which is allowable in many HTML 4 tags.

For further information, you can check out:

http://www.ibloomstudios.com/articles/vertical-align_misuse/ http://www.ibloomstudios.com/articles/applied_css_vertical-align/

The link which David Alpert posted is incredibly useful in this matter.

Answer 5

I never answered the first two questions, so feel free to give your answers below. But I did solve the last problem, of how to make it work.

I added a containing div to the two divs inside the table cells like so:

<table>
  <tr>
    <td>
      <div class="t">
        <div class="h">Title Text<br />Line 2</div>
        <div class="ha">@</div>
      </div>
    </td>

Then I used the following CSS

<style type="text/css">
table {
  border-collapse: collapse;
}
td {
  border:1px solid black;
  vertical-align:bottom;
}
.t {
  position: relative;
  width:150px;
}
.h {
  background: #FFFFCC;
  width:135px;
  margin-right:15px;
  text-align:right;
}
.ha {
  background: #FFCCFF;
  width:15px;
  height:18px;
  position:absolute;
  right:0px;
  bottom:0px;
}
</style>

The key to it all is for a div to be position absolutely relative to it's parent the parent must be declared position:relative

Answer 6

It is possible to valign to div useing css

http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/

Hope It will help your.