HTML 2列のレイアウト - 最上位のコンテナの背景色を適用する

私は自分のhtmlで2列のレイアウトを作成しようとしています。HTML 2列のレイアウト - 最上位のコンテナの背景色を適用する

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Welcome</title> 
<style> 
body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    color: black; 
    font: normal 12px/1.8em Arial, Helvetica, sans-serif; 
    background-color: #132959; 
    background-repeat: repeat; 
    background-position: left top; 
} 


.outer{ 
    width:970px; 
    margin: 0 auto; 
    background: black; 
} 

.toc{ 
    width:250px; 
    margin: 0; 
    padding:0; 
    float:left; 
    color:yellow; 
} 

.content{ 
    padding: 0; 
    width:720px; 
    float:right; 
    color:white; 
} 
.container{ 
    width:970px; 
    margin: 20px auto; 
} 

.logo { 
    margin: 0; 
    padding: 0; 
    float: left; 
    width: auto; 
} 

.logo a{ 
    color : #fff; 
    text-decoration:none; 
    font: bold 40px/1.2em Arial, Helvetica, sans-serif; 
    letter-spacing: -2px; 
} 

.logo small { 
    display: block; 
    padding-left: 80px; 
    font: normal 12px/1.2em Arial, Helvetica, sans-serif; 
    color: #EDF3F6; 
    letter-spacing: normal; 
} 

.logoimage { 
    height: 50px; 
    border: none; 
    margin: 0; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="logo"> 
    <a href="http://www.csmart.co.in">Csmart 
    <small>Let's make life easy!</small> </a> 
</div> 
<div style="clear:both;padding:15px"/> 
<div class="outer"> 
    <div class="toc"> 
    TOC 
    </div> 
    <div class="content"> 
    Welcome 
    </div><!-- content --> 
</div><!-- outer--> 
</div>

私のdiv外側が黒色に着色されています。ここに私のコードです。しかし、それは画面に表示されません。もし私が外に高さを与えたら、それが現れます。しかし、それはこのようにする必要はありません。私はページの高さを予測することはできません。なぜdivの外側の背景色がブラウザに表示されないのですか？

出典

2012-01-09 sethu