HTML 2列布局 - 应用背景颜色的顶级容器

我想创建一个2列布局与我的HTML和它只是没有发生。这里是我的代码：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