Оставил div ширину 200px, контент div остальное?

Question

body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

            #wrapper {
                padding: 1px;
                margin: 0 auto;
            }

            #left {
                width: 200px;
                float: left;
                background: orange;
                position: fixed;
                text-align: center;
                padding: 2px;
            }

            #content {
                float: right;
                text-align: left;
                padding: 2px;
                width: ???;
                background: #F0F0F0;
            }

Привет еще раз! Я хочу создать простой макет с шириной меню 200 пикселей и содержимым div, который занимает оставшуюся часть ширины ... Но как я могу это сделать?

Я уже искал в Google и других темах stackoverflow, но ничего не смог найти ...

Привет

Редактировать: Я снова попробовал поискать в goolge и нашел пример того, как он должен выглядеть: http://www.thesitewizard.com

Но поскольку у него есть какие-то странные имена div, я не знаю, какой код он использует для какого div ...

Answer 1

Вы можете работать с плавающей точкой в ​​сочетании с полем для достижения желаемого результата. Чтобы получить то, что вы хотите, ваша HTML-структура должна выглядеть примерно так:

<div id="wrapper">
    <div id="menu">place your content here</div>
    <div id="main">place your content here</div>
</div>

Минимально необходимый CSS должен выглядеть следующим образом:

#menu { float: left; width: 200px; }
#main { margin-left: 200px; }

Я добавил демо на jsfiddle , чтобы показать результаты с помощью некоторых цветов фона.

Answer 2

Как насчет использования display:table, display:table-row, display:table-cell элементов?

jsFiddle здесь: jsFiddle

display: таблица теперь поддерживается во всех браузерах, поэтому в 2013 году я бы использовал это

Answer 3

Я удивлен, что никто не ответил CSS: flex на данный момент

display:flex;

Чтобы узнать, как использовать это свойство, попробуйте flexbox froggy

Answer 4

вы можете использовать

width:100%;
padding-left:200px;
float:right;

для #content и

width:200px;
float:left;
padding-left:-200px;

для левого