Question

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.

Answer 1

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;
}