Geek Answers Handbook

Floating divisions obeying / not obeying vertical alignment

In a table cell that has vertical alignment: at the bottom, I have one or two divs. Each div floats to the right.
Presumably, divs should not match the bottom, but they do (which I don't understand, but that's good).
However, when I have two floating divs in a cell, they are aligned to the same top row. I want the first, smaller, div to sit all the way down. Another acceptable solution is to create the full height of the table cell.

It's hard to explain, so here is 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:

  • Why is the @ sign at the same level as the yellow div?
  • Presumably vertical alignment does not apply to block elements (for example, to a floating div) 1. But it does!
  • How can I make @ sit down or make it the 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 red @ in the bottom row of the table cell, next to the yellow box. Using clear on any div, they will be placed on different lines. In addition, cells can have variable lines of text, so row height will not help.

+6
css
source share
5 answers

I have never answered the first two questions, so feel free to give the answers below. But I solved the last problem, how to make it work.

I added a div containing the div to two divs inside the table cells, for example:

 <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 is when the div will absolutely relate to it. Parent must be declared as position: relative

+2
source share

I found this article extremely useful for understanding and troubleshooting vertical alignment:

Understanding vertical alignment or "How (not) to a vertical content center"

+8
source share

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

0
source share

If you do not want both divs to be on the same line, do not float them to the right. If you put @ below the text in the markup, and then set the float to "clear", it will put it under the text.

0
source share

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

This property affects the vertical positioning within the line string of the boxes generated by the built-in element. The following values ​​make sense only for an element of the parent inline level or for an element of the parent block if this element generates anonymous inline fields; they do not work if such a parent does not exist.

There is always confusion in CSS regarding the vertical-align property, since in most cases it does not do what you expect from it. This is because it is not the same as valign, which is acceptable in many HTML 4 tags.

For more information, you can check:

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

The link posted by David Alper is incredibly useful in this matter.

0
source share

More articles:


All Articles