making the div width stretch to fit its contents
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;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
........300 tds later
<td align="center" style="width: 31px; height: inherit;"> </开发者_JAVA技巧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
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.
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.
remove position absolute from the immediate child of fixmywidth
if you remove position:relative
from 'fixmywidth', it should work.
精彩评论