0

I have a table inside a table. To make the table column width match the table header, I use spans with set widths. I'd like to transition to RowSpans and ColSpans to solve this issue in a more elegant way, but I still wonder why I have this problem.

Why is the div set to height: 0px when I use style float:left?

This causes the div with the red background to overlap with the first 'row' of the table inside the table. I can manually set the div height, for example to 40px, but I don't know how high the first div is in the application.

<table border=1>
  <tbody>
    <tr>
      <td>
        <!-- this div height is 0px with float:left present -->
        <div style="background-color:green;">
          <span style="display: inline-block; width: 150px; float:left; background-color:orange;">Some Text</span>
          <span style="display: inline-block; width: 250px; float:left; background-color:orange;">Some More Text</span>
          <span style="display: inline-block; width: 200px; float:left; background-color:orange;">Some Multiline<br/>Text</span>
        </div>
        <div style="background-color:red; height:150px;">
          BIG ELEMENT
        </div>
      </td>
      <td>
        <input type="text"/>
      </td>
      <td>
        Stuff
      </td>
    </tr>
  </tbody>
</table>
FalcoGer
  • 2,278
  • 1
  • 12
  • 34
  • if you float you also have to use `clear: left` to reset the floats. You are not creating a layout with tables, are you? ;) – cloned Jul 26 '19 at 09:15
  • Floats are designed to do [this](https://www.w3.org/TR/CSS2/images/float2p.png) so they don't influence the height of their parent. You seem to be using them to make a bunch of elements sit in a horizontal row, which was a great hack in the 1990s but today we have Flexbox so look at using that instead. – Quentin Jul 26 '19 at 09:16

0 Answers0