making the div width stretch to fit its contents

Question

Hi, I have the following html code:

<table>
  <tr>
    <td>
      <div id="fixmywidth" style="position:relative; height:30px;">
        <div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
          <table style="height:inherit">
            <tr style="height:inherit">
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
              ........300 tds later
              <td align="center" style="width: 31px; height: inherit;">&nbsp;</td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table> 

how do i make the div with the id "fixmywidth" width fit the width of the containing elemets? i tried width=100% and widht = auto but they wouldn't work thanks a trillion in advance, Lina

Answer 1

This is not possible because the div inside it is not actually inside it, because of the position relative/absolute.

Im not 100% sure what you are trying to accomplish there but if you remove those 2 it will size properly.

Answer 2

remove position absolute from the immediate child of fixmywidth

Answer 3

By "containing elements," do you mean the elements that contain <div id="fixmywidth"></dIv>, or the elements contained within <div id="fixmywidth"></div>?

If it's the latter, Fabian is right, and the issue lies here:

<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">

position: absolute; takes the <div> out of the document flow, so it takes up no space. Therefore, its containing element (<div id="fixmywidth"></div>) doesn't encompass any elements in the document flow, and therefore has no dimensions.

You can fix that by removing position: absolute;, but that may not fall in line with your layout goals.

Answer 4

if you remove position:relative from 'fixmywidth', it should work.