Question

I’m trying to put a table inside a div for easy layouts. But as soon as I changed the height of the div from a fixed value to ‘auto’, the height of the div dropped to zero. Here’s, a simplified version of how the code looks.

<div class="box">
    <table>
       <tr>
       <td> <img src="something.jpg" alt=""> </td>
       <td> <p>something<p> </td>
       </tr>
    </table>
</div>

Is there something that I should do to stretch the div? Here’s the CSS for the div. I really feel I’m missing something simple.

.box {
float: center;
margin: 10px 0px 10px 70px;
height: auto;
width: 600px;
text-align: left;
border: 2px solid #e3e2e2; 
border-radius: 5px;
padding: 0px 0px 0px 0px;   
font-size: 25px;
}

Thanks for your help.

Answer 1

<td> <p>something<p> </td>

You’re opening another paragraph inside the paragraph, rather than closing the existing one. This can have many different effects in different browsers, although in this instance it won’t affect anything in the latest versions of each browser (it might affect older browsers).

Aside from that, fixing your CSS should prevent other bugs:

.box {
margin: 10px 0 10px 70px;
height: auto; /* Is this needed? Height is auto by default. */
width: 600px;
text-align: left; /* Is this needed? Text-align is left by default. */
border: 2px solid #e3e2e2; 
border-radius: 5px;
padding: 0;   
font-size: 25px;
}