13

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?

2 Answers 2

5

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>
2
  • 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. Apr 13, 2010 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. Apr 14, 2010 at 8:36
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

1
  • v and x are horrible IDs. Oct 28, 2016 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.