Home/ Questions/Q 736617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T07:37:31+00:00

I’m trying to accomplish the following using CSS: <table border=1 width=300px> <tr> <td rowspan=2>This

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0