Menu
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> 
647
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.
If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'. The height depends on the values of other properties. Note that min-height and max-height are not acceptable. It must be the height property.
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; }
195
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
