css - 左边 div 200px 宽度，内容 div 其余？

Question

body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

            #wrapper {
                padding: 1px;
                margin: 0 auto;
            }

            #left {
                width: 200px;
                float: left;
                background: orange;
                position: fixed;
                text-align: center;
                padding: 2px;
            }

            #content {
                float: right;
                text-align: left;
                padding: 2px;
                width: ???;
                background: #F0F0F0;
            }

再次问好 stackoverflow!我想创建一个简单的布局，菜单宽度为 200 像素，内容 div 占据其余宽度...但我该怎么做？

我已经在谷歌和其他 stackoverflow 主题上进行了搜索，但我找不到任何东西......

问候

编辑:我再次尝试在 goolge 上搜索，我找到了一个示例: http://www.thesitewizard.com

但是因为他有一些有点奇怪的 div 名称，我不知道他用什么代码来表示什么 div...

Answer 1

您可以结合使用 float 和边距来达到您想要的结果。要获得您想要的内容，您的 HTML 结构应类似于以下内容:

<div id="wrapper">
    <div id="menu">place your content here</div>
    <div id="main">place your content here</div>
</div>

所需的最低 CSS 应如下所示:

#menu { float: left; width: 200px; }
#main { margin-left: 200px; }

我添加了一个 demo on jsfiddle在一些背景颜色的帮助下显示结果。