当文本太长时，我简单的两列布局会中断。我究竟做错了什么？答案

【问题标题】：My simple two column layout breaks when the text gets too long. What am I doing wrong?当文本太长时，我简单的两列布局会中断。我究竟做错了什么？
【发布时间】：2012-06-03 09:18:59
【问题描述】：

我正在构建一个非常简单的网页，它有一个页眉、一个左侧导航框和一些内容，以及一个页脚。它使用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;}

我错过了什么？

【问题讨论】：

如果宽度不变，则固定内容div的宽度。请参阅此工作示例jsfiddle.net/2U6bz/1
谢谢。如果我希望修复内容的宽度，这确实有效，但是，唉，我希望内容区域的宽度灵活。
您是否尝试过为您的内容和/或导航百分比提供基于最大宽度的最大宽度（请记住在计算时考虑填充、边距等）？

标签： html css layout css-float

【解决方案1】：

不要浮动内容 div，而是给它足够的左边距以清除导航 div。

简单的两列布局在这里说明http://jsfiddle.net/DFvyb/

【讨论】：

【解决方案2】：

我建议尝试使用开源网格系统，而不是尝试自己动手。

有很多，你可以看看这个，例如： https://github.com/stubbornella/oocss/wiki

【讨论】：

谢谢汤姆，虽然这很有趣，我一定会去看看，但这不是我问题的答案，而且对于我正在构建的非常简单的页面来说似乎太重了。

【解决方案3】：

h2 和 p 标签应该在 div 中，并在下面的 div 检查链接上应用宽度

http://jsfiddle.net/DzQRR/

【讨论】：

【解决方案4】：

为 #content div 设置 with 属性，例如900像素

【讨论】：