使用CSS定位左侧边栏

Question

我正在尝试设计一个带有左侧边栏和居中标题的布局。 我在包装div中具有标题和侧边栏，以便它们可以在页面上居中，但是我希望侧边栏位于标题的左侧，如此屏幕截图所示

我该如何实现？ 现在，当我调整窗口大小时，边栏将不会跟随标题。 任何帮助将不胜感激，我仍在学习CSS。 谢谢。

这是我的HTML和CSS（注意：我的边距：导航的0自动0 15像素，但取出了）：

<body>
<div id="wrapper">
    <header>

    </header>

    <nav>
        <ul>

        </ul>
    </nav>
</div>

    body {
    margin:0;
    padding: 5px;
    background-color: #121212;
}

#wrapper {
    margin:0 auto 0 auto;
    width:1024;
}

header {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);

    width: 768px;
    height:100px;
    border-radius: 4px;
    border: 2px solid #adadad;
    margin:0 auto 0 auto;
}

nav {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);

    width:230px;
    height:235px;
    border-radius: 4px;
    border: 2px solid #adadad;

}

Answer 1

您可以在这里： http : //jsfiddle.net/WMYmV/1/

样式更改：

header {
    width: 538px; //(768px - width of sidebar)
    margin: 0 auto 0 230px;
}