Search code examples
htmlcsssidebar

Position left sidebar with CSS

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 screenshotenter image description here

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;

}
Solution

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

    Changed style:

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