代码之家 › 专栏 › 技术社区 › Louis W

布局问题:固定大小的边栏,带流体内容和清除

css

Louis W · 技术社区 · 17 年前

我需要一个固定大小的侧边栏和一个流动内容区域的CSS布局。问题是,这种格式的大多数CSS布局都使用浮动来定位侧边栏。因为这个,我不能用一个清晰的:都在内容区内。

查看附加的HTML。内容区在浮动时跳到导航内容的底部。

我需要这种类型的CSS布局的解决方案,它仍然允许我在内容区域内使用float/clear。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 0;
        }

        #nav {
            float: left;
            width: 160px;
        }

        #content {
            margin: 0 0 0 200px;
            background-color: green;
        }       
</style>
</head>
<body>
<div>

    <div id="nav">

        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>

    </div>
    <div id="content">

        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>


        <div style="padding: 10px; float: left; width: 100px; background-color: yellow;">Left</div>
        <div style="padding: 10px; float: right; width: 100px; background-color: orange;">Right</div>

        <div style="clear: both;"> </div>

        (This shouldn't be way down here) This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>

    </div>
</div>
</body>
</html>