CODEWITHSUNDEEP
csslayouthtml
Alix Axel
Alix Axel

Reputation: 154553

HTML DIV element Disappears with no content

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?

Upvotes: 10

Views: 12950

Answers (7)

DefyGravity
DefyGravity

Reputation: 6011

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>

Upvotes: 1

cletus
cletus

Reputation: 625087

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.

Upvotes: 15

David F Mayer
David F Mayer

Reputation: 99

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.

Upvotes: 1

rob
rob

Reputation: 1

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

height:1em;
display:block;

Upvotes: 0

PantsOffNow
PantsOffNow

Reputation: 341

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>

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37533

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.

Upvotes: 1

Sampson
Sampson

Reputation: 268344

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.

Upvotes: 4

Related Questions