CODEWITHSUNDEEP
htmlcss
Ivan Pandžić
Ivan Pandžić

Reputation: 598

Div won't fill the empty space

I believe that this is the default behavior of CSS but I'm not sure why and it would be great if someone can explain it.

Content has 3 div tags (A,B,C). A and B are floating taking the 100% of width(60%+40%) but their height is different. A is 300px, B is 400px in height. C has width of 40% and it is also floating to the left.

.content {
  width: 400px;
  height: 800px;
  border: solid 1px;
}

.column-a {
  width: 60%;
  height: 300px;
  background: green;
  float: left;
}

.column-b {
  width: 40%;
  height: 400px;
  background: red;
  float: left;
}

.sub-columns {
  width: 40%;
  height: 200px;
  background: orange;
  float: left;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="content">
    <div class="column-a">A</div>
    <div class="column-b">B</div>
    <div class="sub-columns">C</div>
  </div>
</body>
</html>

My idea was that C is placed right beneath the A because there is room, bit it seems that browser won't place it there because B div is higher than A and C appears under the B div. Image:

enter image description here

Why is this happening, shouldn't be C placed underneath A?

Upvotes: 0

Views: 974

Answers (2)

Jason
Jason

Reputation: 46

This is an inherent behavior of floats, the space is occupied by the highest element.

If you want to achieve this layout without resorting to JS and masonry plugins, try flexbox.

.content {
  width: 400px;
  height: 800px;
  border: solid 1px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.column-a {
  width: 60%;
  height: 300px;
  background: green;
  order: 1;
}

.column-b {
  width: 40%;
  height: 400px;
  background: red;
  order: 3;
}

.sub-columns {
  width: 40%;
  height: 200px;
  background: orange;
  order: 2;
}
<div class="content">
  <div class="column-a">A</div>
  <div class="column-b">B</div>
  <div class="sub-columns">C</div>
</div>

Fiddle: https://jsfiddle.net/mp32qjf2/1/

Upvotes: 1

C3roe
C3roe

Reputation: 96240

As to why this is happening - it's because the behaviour of floated elements is specified this way.

https://www.w3.org/TR/CSS21/visuren.html#floats has a lists titled "Here are the precise rules that govern the behavior of floats", and the second item on that list is:

  1. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

Since there is no space for C next to B, the "the left outer edge of the current box must be to the right of the right outer edge of the earlier box" part of the requirement can not be fulfilled - so "its top must be lower than the bottom of the earlier box" becomes applicable.

You got to keep in mind that float is basically a property from the "stone ages" of CSS. It was never even intended for creating "column layouts", but simply to have text float around an image, simple stuff like that. Of course we used it for columns for a long time - but that's because we had nothing else really suitable to do the job, and rather not because it was the proper tool for this to begin with. But browsers at the time were much less sophisticated, and that is probably the main reason it was specified this way - relatively easy to implement (and nevertheless Internet Explorer managed to mess up floating/clearing for a long time.) Had someone thrown a flexbox or grid specification at browser developers at that time, they'd probably gone, you gotta be kidding us, this kind of complexity is unmanageable with the resources and computing power we have available here ... if that's what you demand, we're not gonna bother to start implementing this "CSS" thing in the first place, you crazy kids ... ;-)

Upvotes: 4

Related Questions