Как бы вы реализовали этот макет HTML / CSS?

Question

Скажем, у вас есть очень простой центрированный дизайн, 500px div с центром в окне просмотра с margin: 0 auto;:

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

и затем вы хотите добавить небольшой навигационный элемент слева

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

но держите основной div по центру страницы, как бы вы сделали это?

Я придумала решение, которое включает пару дополнительныхdivs, но это не совсем элегантно.

Какие у вас решения?

Редактировать : Спасибо всем.Это может показаться сумасшедшим, но то, что делало это настолько сложным для меня, было: Я никогда не думал о том, чтобы сделать nav дочерним элементом основного div .Я не знаю почему.Мой мозг может быть сломан.Но нет никакой технической причины, почему бы и нет, поэтому мне нужно практиковать более боковое мышление.Еще раз спасибо.

Answer 1

Вот, пожалуйста, я использовал несколько меньших размеров, поэтому в JSFiddle все выглядит хорошо. Очевидно, вы можете изменить размер вашего окончательного дизайна. (основной width:500px и боковой width:200px и 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;
}

Answer 2

Вы можете использовать отрицательное поле, которое будет работать в большинстве современных браузеров.

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

Отрицательные поля действительны. http://www.w3.org/TR/CSS2/box.html#margin-properties

Answer 3

попробуй как

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

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

Answer 4

Вы могли бы сделать это ... мне просто не нравится много использовать минус. Старшее И.Е. может быть смешным

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

вам может понадобиться

внизу

Answer 5

Сделайте левый бит дочерним по отношению к главному div, установите position: absolute, а затем установите left: -200px.

Answer 6

Вы можете присвоить вашему 200px div стиль {position: absolute; top: 50px; слева: 200px; }

Возможно, вам понадобится поместить 200px div внутри другого div, для которого установлен атрибут позиции.