10

When I create an HTML div element with no content, it disappears.

When the div is populated, like this HTML, then it works right.

<!doctype html>
<head>
<style>
    .nav {
        width: 26%;
        display: inline;
        float: left;
        margin-left: 2%;
        margin-right: 2%;
        background-color: #FF0000;
    }
    .content {
        width: 56%;
        display: inline;
        float: left;
        margin-left: 2%;
        margin-right: 2%;
        background-color: #0000FF;
    }
</style>
</head>

<body>
    <div style="width: 600px;">
        <div class="nav"><p>nav</p></div>
        <div class="content"><p>content</p></div>
    </div>
</body>
</html>

I get the following (expected) output:

alt text

However, if I change the div element with the class = nav to no content:

<div class="nav"></div>

The red box disappears:

alt text

It's like there is no div there! How can I always have the program show the div with no content?

7 Answers 7

15

When the div is empty the element has no height. So what's actually happening is that it's there but has 0 height.

You could put something in it (like &nbsp; or give it height and/or line-height. I'd suggest giving the other div the same height.

1
  • 1
    Thanks, CSS can be a PITA (every|some)times. I went with the &nbsp; approach.
    – Alix Axel
    Jan 22, 2010 at 3:37
4

Put a non-breaking space in it. That's what I do when I need something, but not nothing. You may also be able to give it an explicit height to get the same result.

1

Make sure the contains some kind of content.   is usually the best. It ensures that there is at least something for the browser to display/render. This also might be a cause of your DTD.

1

Another thing that call cause this is improperly nested tags or tags that are not closed.

Make sure all tags are properly nested and closed.

1

This approach lets the div be empty, by using inline-block display. You force the height.

CSS:

.nav { 
    width: 26%; 
    height: 2em;
    display: inline-block; 
    float: left; 
    background-color: #FF0000; 
} 
.content { 
    width: 56%;
    height:2em;    
    display: inline-block;    
    background-color: #0000FF; 
}

HTML:

<div style="width: 600px;"> 
    <div class="nav"></div> 
    <div class="content"><p>content</p></div> 
</div> 
0
0

Alix,

you need to add a height value to the class .nav

    <!doctype html> 
<head> 
<style> 
    .nav { 
        width: 26%; 
        height: 50px;
        display: inline; 
        float: left; 
        margin-left: 2%; 
        margin-right: 2%; 
        background-color: #FF0000; 
    } 
    .content { 
        width: 56%; 
        display: inline; 
        float: left; 
        margin-left: 2%; 
        margin-right: 2%; 
        background-color: #0000FF; 
    } 
</style> 
</head> 

<body> 
    <div style="width: 600px;"> 
        <div class="nav"></div> 
        <div class="content"><p>content</p></div> 
    </div> 
</body> 
</html> 
0
0

after you add a height value also add a display property to the nav class like:

height:1em;
display:block;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.