Wrapper div height is 0 with floated elements inside

Question

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>?

possible duplicate of [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Oriol, Apr 03 '15 at 15:06

score 48 · Accepted Answer · edited Oct 22 '13 at 01:14

48

Set overflow: hidden on the parent.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

edited Oct 22 '13 at 01:14

Josh Crozier

233,099
56
391
304

answered May 23 '12 at 16:57

Ana

35,599
6
80
131

1

I'm curious why does it collapse like that in the first place? – HussienK Jul 25 '16 at 16:18

score 10 · Answer 2 · answered May 23 '12 at 16:59

10

The outer div is collapsing because the two child divs inside of it are floating. The easiest fix for this is to set overflow: hidden; on the outer div.

answered May 23 '12 at 16:59

daGUY

27,055
29
75
119

score 2 · Answer 3 · answered May 23 '12 at 16:58

2

Try this:

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close

answered May 23 '12 at 16:58

ow3n

5,974
4
53
51

Wrapper div height is 0 with floated elements inside

3 Answers3

Linked

Related