How to Make an Empty Div Take Space

How to make an empty div take space?

It works if you remove floating. http://jsbin.com/izoca/2/edit

With floats it only works if there's some content e.g.  

How to make a div take up space even if it is empty?

add:

.figure {
    vertical-align: top
}

Empty div (with style: height) will not display

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

Is correct using empty div with fixed height for spaces in a website?

Use padding-top, padding-bottom, margin-top, and margin-bottom as needed. Using <div> elements for spacing is bad practice. Here's an example using these CSS attributes to give vertical space both above and below some elements:

HTML

<div>Top text</div>
<div class="spaceAbove">Hello</div>
<div>Middle text</div>
<div class="spaceBelow">World</div>
<div>Bottom text</div>

CSS

.spaceAbove {
    padding-top: 20px;
    //margin-top: 20px;
}

.spaceBelow {
    padding-bottom: 20px;
    //margin-bottom: 20px;
}

See the MDN page on the box model for more information on when and how to use these.

But for your code, I would take a slightly different approach. See this question for some interesting and possibly cleaner alternatives.

Div won't fill the empty space

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:

2. 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 ... ;-)

---

Related Topics