Question

In the following code I need to match the width when shrinking the window :

<div style="background-color:blue;">The title</div>
<table>
  <tr>
    <td> Column title </td>
    <td>Content</td>
    <td>Column title2</td>
    <td>Content 2</td>
  </tr>
</table>

This is just a little example of the page, it would involve more divs and tables.

When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.

Is there any way to stop the div shrinking when table can’t shrink any more?

I tried min-with and it does not work, and I asked already for anything similar but apparently there isn’t anything apart of JavaScript.

Could any of you give me a solution other than JavaScript?

Thanks in advance.

Cesar.

Answer 1

I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.

<div style="background-color:red;">
  <div style="background-color:blue;">The title</div>
  <table>
    <tr>
      <td> Column title </td>
      <td>Content</td>
      <td>Column title2</td>
      <td>Content 2</td>
    </tr>
  </table>
</div>