CSS Equivalent of Table Rowspan with Fluid Height

Question

I'm trying to accomplish the following using CSS:

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

alt text

The examples I've seen for accomplishing this utilize fixed heights or allow the content to wrap around the left column. Is there an elegant way to accomplish this using CSS?

score 5 · Accepted Answer · answered Apr 09 '10 at 22:50

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>

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 Sumner, Apr 13 '10 at 21:52
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, Apr 14 '10 at 08:36

score 3 · Answer 2 · answered May 03 '13 at 10:31

3

I needed something very similar. Unfortunately all these solutions are pretty complex, I came with something very simple (maybe too simple) -- used display: inline-block

HTML

<div>
    <span id="v">
        text in the left
    </span>
    <div id="x">
        <div>upper row</div>
        <div>lower row</div>
    </div>
</div>

CSS

#x {
    display: inline-block;
    vertical-align: middle;
}

fiddle

answered May 03 '13 at 10:31

Tomas Tomecek

6,226
3
30
26

`v` and `x` are *horrible* IDs. – Dan Bechard Oct 28 '16 at 13:02

CSS Equivalent of Table Rowspan with Fluid Height

2 Answers2

Linked