Displaying divs without any content in them?

Question

There are two questions.

Firstly, if there is no height set on divs, and there is no element contained inside them, won't they display at all?
Secondly, depending on the first question, if I want to display a div to be 90% of the body height and centered both horizontally and vertically, even if there is no content inside of it, what is the css required?

Try it! It would be quicker to test this than to type the question! — Ben Parsons, Oct 08 '12 at 08:03

score 2 · Answer 1 · answered Oct 08 '12 at 08:03

Welcome to the magic of positioning, where the height gets calculated automatically:

#myemptydiv{
    position:absolute;
    top: 5%;    // height gets calculated automatically
    bottom: 5%;
    width: 600px;
    margin: auto;
}

So, to answer your first question: no, at least if there isn't a implicit height by using positioning. The second question is answered by the code given above.

See also:

Bram Vanroy · Accepted Answer · 2012-10-08T08:15:52.820

To completely centre a div (or any block element) you should use absolute positioning in combination with negative margins. Take a look here: enter link description here. Try resizing the window: it's positioning happens automatically.

div {
    width: 90%;  /* Can be a non-percentual number */
    margin-left: -45%; /* negative value of element's width/2 | Can be a non-percentual number */
    margin-top: -45%; /* negative value of element's height/2 | Can be a non-percentual number */
    height: 90%;  /* Can be a non-percentual number */
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}

Of course, when you are only using percentual values, it is easier to just do the math: 50% - 45% = 5% (as Zeta's post suggest) but I used this method to show that this works with non-percentual values as well. Example.

div {
    width: 320px;
    margin-left: -160px; /* negative value of element's width/2 */
    margin-top: -120px; /* negative value of element's height/2 */
    height: 240px;
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}

When an element does not have a specific height and it doesn't have content, you will not see it, no. It will have an automatic width (normally 100%) but no height. You can make it visible though, by adding a border: http://jsfiddle.net/TALAA/2/

@Zeta I very well know what I am doing. What's the problem with them? This is the best method that's all over the web to both horizontally and vertically centre an element when a non-percentual width is given. I used the negative margin and top/left values here to make it clear you can use it for non-percentual values as well. (You can't do that with your solution). — Bram Vanroy, Oct 08 '12 at 08:12
I deleted my comment almost instantly after I posted it and also removed the downvote after I realized my mistake. I'm going to get a coffee to prevent such things. However, I still believe that in this very specific case `top:5%;bottom:5%` and no `margin-top` is sufficient for the vertical position. — Zeta, Oct 08 '12 at 08:46
@Zeta Of course, but SO is a place to learn, not to copy and paste. So I thought it better to make clear what everything does than to just say: here's the solution, have fun with it. But when he tries to do it with pixel-values, he'll get stuck. But hey, no hard feelings. — Bram Vanroy, Oct 08 '12 at 09:13

Displaying divs without any content in them?

2 Answers2