SomeContent
Clever Geek Handbook

Expanding HTML column as the inner Div expands

Please note the following:

<td style="width: 500px;">
    <div style="width: 400px;">SomeContent</div>
</td>

For some reason, the column containing the div won't expand to 500px as the style suggests.

Do you know how to get td to respect the width I specify in the style?

0


source to share


4 answers


In theory, you can use the min-width and max-width styles. In practice, some popular browsers ignore these styles. In this case, you have explicitly declared a width of 400, so it should always be 400 unless affected by a child, growing or shrinking parent. You can start the "server" and programmatically define the width attribute based on the size of the content, or you could play with the overflow style or place it in a horizontal scroll bar.



+2


source


is there any table width and other tables in the table? Also, do you have a document type?

However, in doing so, here's your solution:

<td style="width: 500px">
  <div style="padding: 0 50px">SomeContent</div>
</td>


Configure the add-on accordingly.

After rereading your question, I feel like this may not be the answer you are looking for. Could you tell us more?

0


source


try this:

<td style="width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

if you want the td to be the exact size of the div, up to MAX 500px, try:

<td style="max-width:500px;">
  <div style="width:100%;">SomeContent</div>
</td>

Keeping in mind IE6 doesn't understand max width and just forces it to be 500px.

0


source


You have no reason to set a fixed width on a DIV in a TD, by default DIVs are block elements, which means they will fill the entire width of the containing element.

Either set padding to TD or marker to DIV to achieve the same style.

Seeing no additional markup or css, I see no reason why the TD will not be 500px, if you add two different background colors to the elements, you will actually notice that the TD is 100px wider than the div.

0


source






More articles:


All Articles