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 (whic

Answer 1

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 2

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

Answer 3

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 4

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 5

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.