我正在构建一个非常简单的网页，它有一个页眉、一个左侧导航框和一些内容，以及一个页脚。它CSS用于控制布局。如果我的内容区域中的文本很短，它可以正常工作，但是如果文本的长度太长（即在几乎所有情况下），内容区域会下降到导航框下方，而不是很好地坐在导航旁边。
HTML看起来像这样：
<?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-GB">
<head>
<title>Title Goes Here</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- local style sheet -->
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrapper">
<div id="navigation"><!-- Navigation -->
<ul>
<li><a href="#">Navigation</a></li>
<li><a href="#">Options</a></li>
<li><a href="#">Go</a></li>
<li><a href="#">Here</a></li>
</ul>
</div><!-- Navigation end -->
<div id="content"><!-- Main Content Area -->
<h2>Your Content Goes Here</h2>
<p>Whatever content you like can go here but if the text is too long it seems to
break the floating of the content and ends up below the navigation div.
This is really very annoying and I'd love to know how to fix it.</p>
</div><!-- Main Content Area end -->
</div>
<div id="footer">
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">Footer</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>
CSS看起来像这样：
body {
background:#000;
-webkit-background-size:1920px 1200px /* dimensions of graphic */
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
width:100%;
}
#header, #wrapper, #footer {
width:100%;
}
/* Header styles */
#header {
clear:both;
float:left;
}
/* main container that wraps the content */
#wrapper {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
overflow:hidden; /* This chops off any overhanging divs */
background:#fff; /* right column background colour */
margin-top:20px;
-moz-border-radius:25px;
border-radius:25px;
}
#content {
float:left;
position:relative;
margin-left:20px;
padding:0 0 1em 0;
}
#navigation {
float:left;
position:relative;
background:#000;
width:150px;
font-size:.9em;
margin:40px 0 0 0;
padding:0 0 1em 0;
z-index:1002;
}
#navigation li{color:#FFF;background:#000;list-style-type:none;}
#navigation a{text-decoration:none;color:#FFF;display:block;padding:5px 15px;}
#navigation li:hover{}
#navigation li:hover a{color:#FFF;display:block;background:#4f81bd;}
#navigation li:hover ul{display:block;}
#footer {
clear:both;
float:left;
font-size:.75em;
margin-top:30px;
}
#footer p {
padding:10px;
margin:0;
}
#footer ul{margin:0;padding:0;}
#footer li, #footer li a{color:#aeaeae;display:inline;padding:0 5px;}
#footer li{list-style-type:none;padding:2px 0;}
#footer li a{font-weight:normal;text-decoration:none;text-transform:none;}
#footer li a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:#4f81bd;}
h1{font-size:1.6em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
h4{font-size:1em;}
我错过了什么？