ansaurus

Question

CSS Equivalent of Table Rowspan with Fluid Height

Answer 1

A:

This is what I use: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

I'd just use the second column as a wrapper for the other two elements (less-semantic). That should be the easiest way.

Kevin Wiskia 2010-04-09 21:37:11

Answer 2

+1 A:

First of all, what you are doing looks like a table to me, so you might want to consider that. Doing it with CSS however is a bit more tricky (unless you do the table styling in CSS). The following code works but does not center vertically the text in the box:

<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

Table cells in CSS are easier:

<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>

Paul de Vrieze 2010-04-09 22:50:36

This is pretty close. I noticed, for your example, that when the left column contains more text than the 2 right columns combined that the right columns don't automatically expand to absorb the extra space. This behavior exists for tables. In any event, I appreciate your answer.

Gabe 2010-04-13 21:52:09

You're right. You can not normally make float hight dependent on another value. Styling the stuff as table might be the best solution that should still have the advantages of not using a html table. The only problem is that it doesn't work in IE<8. You might want to use a conditional stylesheet for that (only supported in IE) that does something else for IE.

Paul de Vrieze 2010-04-14 08:36:27

ansaurus

tags:

views:

answers:

CSS Equivalent of Table Rowspan with Fluid Height

related questions