Position left sidebar with CSS

Question

I am trying to design a layout with a left sidebar and a centered header. I have the header and sidebar in a wrapper div so that they can be centered on the page, but I want the sidebar to be a little left of the header like in this screenshot 在此处输入图片说明

How can I achieve this? Right now, when I re-size the window, the sidebar won't follow the header. Any help would be appreciated, I am still learning CSS. Thanks.

Here is my HTML and CSS (note: I had a margin: 0 auto 0 15px for the nav but took it out):

<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

Here you go: http://jsfiddle.net/WMYmV/1/

Changed style:

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

Position left sidebar with CSS

Question

1 answers

solution1
0 ACCPTED 2013-11-16 23:01:25

Position left sidebar with CSS

Question

1 answers

solution1 0 ACCPTED 2013-11-16 23:01:25

solution1
0 ACCPTED 2013-11-16 23:01:25