Как автоматически настроить ширину div с помощью CSS?

Question

Рассмотрим следующий пример :

HTML:

<div class="wrapper">
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div>
</div>

CSS:

.wrapper {
    border: 1px solid black;
    width: 400px;
}
.left {
    border: 1px solid green;
    display: inline-block;
}
.right {
    border: 1px solid red;
    display: inline-block;
    float: right;
}

Я хочу задать ширинузеленый div должен быть как можно больше в соответствии с шириной красного.Ширина красного div может варьироваться в зависимости от содержимого div.Так, например, если ширина красного div равна 150 пикселей, ширина зеленого должна быть 250 пикселей.Это всегда должно быть правдой:

green div width + red div width = 400px

Как я могу добиться этого с помощью CSS?

Нет JavaScript, пожалуйста ...

Answer 1

Как сказал ранее sandeep, но заставляет зеленый div занимать как можно больше места .

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
    width: 100%;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

Обратите внимание, что divs-as-tables не поддерживается IE7 и ниже.

Answer 2

сделай, что хочешь http://jsfiddle.net/sandeep/eGphW/

.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
}
.right {
    border: 1px solid red;
    display: table-cell;
}

Вы можете использовать div в качестве таблицы.