float property is not working properly

Hi Guys,

I am using code below for layouting. But when view this in browser black bordered div appears small in height. And also when i am making center outer div. It doesnt work well.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   
    <head>
        <style>
            .boxItem{ 
                width: 50%;
                padding: 0px;
                margin: auto;
            }
            .leftItem{
                float: left;
                width: 10%;
                background-color: #CFC;
            }
            .rightItem{
                float: right;
                width: 10%;
                background-color: #FCC;
            }
            .contentItem{
                background-color: #ccc;
                margin: 0 11%;
            }            
        </style>        
    </head>
    <body>
        <div class="boxItem">
            <div class="rightItem">3</div>
            <div class="leftItem">1</div>
            <div class="contentItem">2</div>
        </div>        
    </body>
</html>

Eric Pascarello wrote:<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> .boxItem{ width: 50%; padding: 0px; margin: auto; } .leftItem{ float: left; width: 10%; background-color: #CFC; } .rightItem{ float: right; width: 10%; background-color: #FCC; } .contentItem{ background-color: #ccc; margin: 0 11%; } </style> </head> <body> <div class="boxItem"> <div class="rightItem">3</div> <div class="leftItem">1</div> <div class="contentItem">2</div> </div> </body> </html>

Great Eric. Your solution works. But can you explain why that was happening in my code. It will be great help.