DIV not fitting one inside the other as expected

Question

I am faced with a CSS problem. The situation is as follow:

I have this kind of structure:

#Block {
  background-color: #FF0000;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
[class="Element"] {
  width: 33.33%;
  background-color: #0000FF;
  float: left;
}

<div id="Block">
  <div class="Element">
    Some contents.
  </div>
  <div class="Element">
    Some more contents.
  </div>
  <div class="Element">
    Still some more contents.
  </div>
</div>

I was expecting to see a red box behind my 3 elements(blue), containing them.

But I only see a red rectangle behind the elements, but with the wrong size, more precisely not high enough. It seems that the Block part is totally un related to the rest.

What did I do wrong?

I tried your code, and blue elements are inside of red box. – Ultrazz008 Nov 18 '16 at 11:46 — Ultrazz008, Nov 18 '16 at 11:46
`[class="Element"]`? Don't do this. Use `.Element` – Turnip Nov 18 '16 at 11:47 — Turnip, Nov 18 '16 at 11:47

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

Clear the floats using this:

#Block:after{
  content:'';
  display:block;
  clear:both;
}

and I guess that looks OK now.

Why this happens?

If the containing blocks have floating elements, then it will get height only if you clear the floating context.(See an example here)
If any one of them are not floated, then the containing block takes the height of this element.
You can also use overflow: hidden on the containing block to get the same effect.

#Block {
  background-color: #FF0000;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
[class="Element"] {
  width: 33.33%;
  background-color: #0000FF;
  float: left;
}
#Block:after{
  content:'';
  display:block;
  clear:both;
}

<div id="Block">
  <div class="Element">
    Some contents.
  </div>
  <div class="Element">
    Some more contents.
  </div>
  <div class="Element">
    Still some more contents.
  </div>
</div>

edited May 23 '17 at 10:30

Community

1
1

answered Nov 18 '16 at 11:46

kukkuz

41,512
6
59
95

1

"**only** if you clear the floating context." — Untrue. There are [several other (nicer) ways](http://www.ejeliot.com/blog/59). – Quentin Nov 18 '16 at 11:50
@Quentin and that is a very old article too (10yrs back)... Let me know if you are pointing out at something that I may have missed ? – kukkuz Nov 18 '16 at 12:03
You can also use the `overflow` property to fix this issue... – Stuart Nov 18 '16 at 12:07
@Stuart my answer already mentions it... – kukkuz Nov 18 '16 at 12:08
1

@kukkuz yes i know... (!?) ...my comment was based on these comments here requesting nicer ways. It doesnt matter.... – Stuart Nov 18 '16 at 12:10
@Stuart ok, thanks :) – kukkuz Nov 18 '16 at 12:12

DIV not fitting one inside the other as expected

1 Answers1