Left div 200px width, content div остальное?

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

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

Я уже искал в google и других разделах stackoverflow, но ничего не нашел...

Привет

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

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

Ответы

Ответ 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, чтобы показать результаты с помощью некоторых цветов фона.

Ответ 2

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

jsFiddle здесь: jsFiddle

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

Ответ 3

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

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

для #content и

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

для #left

Ответ 4

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

display:flex;

Для руководства по всем способам использования этого свойства попробуйте flexbox froggy