How would you implement this HTML/CSS layout?

Say you've got a very simple centred design, a 500px div centred in the viewport with margin: 0 auto;:

|<- auto -> +------  500px  -----+ <- auto ->|
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           |                    |           |
|           +--------------------+           | 

and then you wanted to add a little nav element to the left

|<- auto -> +------  500px  -----+ <- auto ->|
|  +--------|                    |           |
|  | 200px  |                    |           |
|  |        |    开发者_如何学编程                |           |
|  |        |                    |           |
|  |        |                    |           |
|  +--------|                    |           |
|           |                    |           |
|           +--------------------+           | 

but keep the main div centred on the page, how would you do that?

I've come up with a solution, which involves a couple of extra divs, but it's not exactly elegant.

What are your solutions?

Edit: Thanks to everyone. This is going to seem crazy, but what was making this so hard for me was, I never considered making the nav a child of the main div. I don't know why. My brain may be broken. But there's no technical reason why not, so, I need to practice more lateral thinking. Thanks again.

Here you go, I used some smaller sizes so it looks well in JSFiddle. Obviously you can change the size in your final design. (main width:500px and side width:200px and left:-200px)

DEMO: http://jsfiddle.net/2GN9M/1/

HTML

<div class="main">
    <div class="side">
    </div>
</div>

CSS:

.main {
    width: 150px;
    margin: auto;
    height: 150px;
    background: red;
    position: relative;
}

.side {
    position: absolute;
    left: -50px;
    top: 10px;
    width: 50px;
    height: 100px;
    background: blue;
}

You can use a negative margin which will work on most current major browsers.

http://jsfiddle.net/yVHzU/

<div id="center">Center<div id="left">left</div></div>

CSS:

#center
{
margin: 0 auto;
background-color: #ff0000;
width: 500px;
}

#left
{
    margin-left: -200px;
    background-color: #ffff00;
    width: 200px;
}

Negative margins are valid css. http://www.w3.org/TR/CSS2/box.html#margin-properties

try its like

<div id="Wrapper"><div id="nav"></div></div>

#nav { position:absolute; left:-200px; width:200px;}
#wrapper { position:relative; width:500px; margin: 0 auto; }

You could give your 200px div a style of { position:absolute;top:50px;left:200px; }

You may need to put the 200px div inside another div which has its position attribute set.

Make the left bit a child of the main div, set position: absolute and then set left: -200px.

You could do this...i just dont like using minus figures to much. Older I.E can be funny

<div id="nav"></div>
<div id="main"></div>

#nav {

float:left;
margin-top:10px;
width: 50px;
height: 100px;
background: blue;
}

#main {
float:left;
width: 150px;
height: 150px;
background: red;
}

you prob need a <div style="clear:both;"></div> at the bottom of it