Help! My content is overlapping.

This tutorial demonstrates how to get round a common issue where you have two elements, one on top of the other, and they overlap. Most of the time this will be because your top element isn't aware it has anything inside it, so is dropping down into the element beneath it. Let's take a look at this rather scary looking issue.

Overlapping elements breaking a page

Warning this example contains content of a completely ridiculous and utterly confusing nature. Readers with a more sensitive disposition may wish to calm themselves down before scrolling the page. You have been warned.

Example of two elements overlapping

CSS Code:

        #listEx1 {
            margin:0;
            padding:0;	
            list-style-type:none;	
        }
        
        #listEx1 li {           
            background-color:#C9C;
            padding:4px;
            margin:0 6px 0 0;
            float:left;
        }
        
        #bottomTextEx {
            margin:10px 0 0 0;
            padding:6px 0 0 0;
            border-top:1px solid #C36;
            background-color:#FC0;
        }
		

(X)HTML Code:

        <ul id="listEx1">
        	<li>CSS</li>
            <li>XHTML</li>
            <li>PHP</li>
        </ul>

        <p id="bottomTextEx">This orange container has been invaded by a purple list.</p>
        

Result:

• CSS
• XHTML
• PHP

This orange container has been invaded by a purple menu.

As you can see, that is quite a trippy result...and not at all what we want. To force the list back to its rightful position, we use a CSS holy grail property overflow.

The incredibly simple fix

The solution to that very weird predicament is a CSS miracle worker overflow. Setting overflow to auto tells our list "actually, you have content, get back to where you belong!". In the below example, we have applied overflow:auto to our list and it has put a stop to the annoying shenanigans.

Example of using overflow:auto to shove the list back to the top

CSS Code:

        #listEx2 {
            margin:0;	
            padding:0;
            list-style-type:none;	
            overflow:auto;
        }
        
        #listEx2 li {         
            background-color:#C9C;
            padding:4px;
            margin:0 6px 0 0;
            float:left;
        }
        
        #bottomTextEx {
            margin:10px 0 0 0;
            padding:6px 0 0 0;
            border-top:1px solid #C36;
            background-color:#FC0;
        }
		

(X)HTML Code:

        <ul id="listEx2">
        	<li>CSS</li>
            <li>XHTML</li>
            <li>PHP</li>
        </ul>
        <p id="bottomTextEx">This orange container is free from the purple list.</p>           
        

Result:

• CSS
• XHTML
• PHP

This orange container is free from the purple list.

That looks better. No more overlap. That one line of CSS has fixed an issue that can confound the mind for hours on end. Nice!