Reputation: 1
I have a table which looks like this ...
<td>
<div style="float:left">
<img src="image1.png" style="display:block" /><br>
<img src="image2.png" />
</div>
<span> <input type="input" />
</td>
<td>
<div style="float:left">
<img src="image1.png" style="display:block" /><br>
<img src="image2.png" />
</div>
<span> <input type="input" />
</td>
I have set style=float
to make the images and the input field in line.
But the problem is when I resize the brower, the div
floats over the td
which I don't want to have.
Is there any workaround for that problem??
Upvotes: 0
Views: 766
Reputation: 12541
Firstly you have to check your html, close those tags (<span></span>
) ;)
Secondly, when items are floating, the container will not read the height, so you have to add a clearer div underneath the floating items.
<div style='clear:both;'></div>
Example:
<td>
<div style="float:left">
<img src="image1.png" style="display:block" /><br>
<img src="image2.png" />
</div>
<div style='clear:both;'></div>
<span> <input type="input" /> </span>
</td>
<td>
<div style="float:left">
<img src="image1.png" style="display:block" /><br>
<img src="image2.png" />
</div>
<div style='clear:both;'></div>
<span> <input type="input" /> </span>
</td>
Upvotes: 1