Empty Div (with Style: Height) Will Not Display

Incredibly simple piece of HTML - but not displaying how I would expect. I'm trying to create an empty div that displays as whitespace on the top of the page, with style='height:

Solution 1:

If you just want to add white space try this

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

FIDDLE

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

Solution 2:

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

Solution 3:

You need to add a background so you can see the white box.

background-color:black;

You won't be able to see it.

Solution 4:

For who looking for a white space (not exactly an empty div) you can add an empty span so the div is no more considered as empty one.

Avoid using   because the default font-size can make the div higher than you want.

div{
    height:100px;
    background:#ff8800;
}

<div><span></span></div>

Solution 5:

The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.