My element is empty and it has vanished

If an element is empty and has no definite dimensions it will not render on screen. To get the element to display, you must give it a width and height in length units such as pixels and ems. Percentage values will work for the height only and not the width, if you give your html and body a percentage height, but there's not really any point in doing this, unless you have a good reason for it.

Combating vanishing elements

Example of the issue

In this example, we are using three divs floated inside a parent called contEx1a.

CSS Code:

       #contEx1a {		
            background-color:#FFC; 
            border:1px solid #F96;
            overflow:auto;
            height:100%; /* For IE6 */
        }            
        
        .block1Ex1a, .block2Ex1a, .block3Ex1a {
            float:left;	        
        }
        
        .block1Ex1a {
            background-color:#66C;	               
        }
        
        .block2Ex1a {
            background-color:#C33;	               
        }
        
        .block3Ex1a {
            background-color:#069;	                
        }
        

(X)HTML Code:

            <div id="contEx1a">
            	<div class="block1Ex1a"></div>
            	<div class="block2Ex1a"></div>
            	<div class="block3Ex1a"></div>
            </div>
        

Result:

WTF???

As you can see, there's nothing there. But give our elements a width and height of 60px and they will appear.

Example that works

CSS Code:

        #contEx1b {		
            background-color:#FFC; 
            border:1px solid #F96;
            overflow:auto;
            height:100%; /* For IE6 */
        }            
        
        .block1Ex1b, .block2Ex1b, .block3Ex1b {
            float:left;
            width:60px;
            height:60px;
        }
              
        .block1Ex1b {
            background-color:#66C;	               
        }
        
        .block2Ex1b {
            background-color:#C33;	               
        }
        
        .block3Ex1b {
            background-color:#069;	                
        }
        

(X)HTML Code:

            <div id="contEx1b">
            	<div class="block1Ex1b"></div>
            	<div class="block2Ex1b"></div>
            	<div class="block3Ex1b"></div>
            </div>
        

Result:

That's better!

Now that the elements have a definite width and height they display as they should. No more invisibility.

Note — if you're working with absolutely positioned elements and you fail to give the relatively positioned element that contains them (if any) a definite height, the empty absolutely positioned elements inside it will overlap the rest of your content.

For more on this issue, see I've made something position:absolute and it's displaying incorrectly.