I have a wrapper <div>
which contains two inner <div>
s that are floating.
<div class="outside" style="border:1px solid #555;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
The problem is the wrapper <div>
has width of 80px since two inner <div>
are 40px each. But always the wrapper <div>
is 0px
in height which makes the border appear like a line at the top.
So I placed the two inner <div>
s inside a <table>
. It worked well. But how do I avoid this problem without going for a <table>
?