azochz azochz - 11 days ago 8
CSS Question

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: 400px;"


Even though I have specified a height, my empty div will not display. What am I missing here?

UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic
style
rules needed to display an empty div?


Full code:

<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div>

<div style="width: 50%; margin: auto;"></div>

</body>
</html>

Answer

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; }