Как сверстать 2 блока?

Question

[Maxdukas]

Привет , я новичок в верстке ,если кто может помочь , буду рад))

хочу сделать такое (резиноваю верстку), чтобы сайдбар и контент были 2 блока , что бы были рядом:


а получается вот так:


Верстку делаю в Dreamweaver cs6
Сайт

Answer 1

[Сергей Карвасарный]

.sitebar {
float:left;
width: 30%;- как пример
}

.content {
float:right;
width: 65%; - 5 процентов на отступ между колонками если нужен, если нет то 70.
} если помог пометьте как ответ)

Comments

[Maxdukas]

сейчас попробую

[Maxdukas]

нет не работает

[Maxdukas]

и ширина сайдбара не должна двигаться

[Сергей Карвасарный]

Maxdukas: так установить в px все. я просто указал для примера

[Сергей Карвасарный]

Сергей Карвасарный: тогда лучше сделать: .sitebar {
float:left;
width: 400px;- как пример
}

.content {
float:right;
margin: 0 0 0 50px;
width: 50%; - 5 процентов на отступ между колонками если нужен, если нет то 70.
}

Answer 2

[Dmmitry]

Ну во-первых блок "fluid content" шире чем ширина места, выделенного под него, поэтому он чисто физически не влезет туда clip2net.com/s/3ak0YKU

Во-вторых он выравненный по правой стороне (float: right) и поэтому опущен вниз на величину высоты сайдбара.

Для начала выставьте ему адекватную ширину, после, подымите вверх. Или же выравнивайте его по левой стороне. Также, можно присвоить одному из блоков position: absolute и выставить нужные отступы.

Comments

[Maxdukas]

не работает , выбить монитор уже хочется ))

[Dmmitry]

Maxdukas: что не работает? как вы пробовали?

Добавьте классу .content:
width: 83%;
margin-top: -160px;

Костыль на быструю руку, но все же работает

Answer 3

[Олег Прилепа]

Вот здесь здорово описаны макеты такого рода: htmlbook.ru/content/rezinovyy-dizayn-dvukhkolonnyy...
Вообще рекомендую к прочтению статьи с этого сайта, очень помогло в свое время научиться верстать.

Comments

[Maxdukas]

Из примера того сайта ,левая колонка автоматически растягиваться вместе с контентом?

[Олег Прилепа]

Maxdukas: Если явно не задать height, то да, будет в высоту тянуться по контенту. Если внутри есть блоки с float параметром, то после них нужно выставить div[style=clear:both], чтобы высота контейнера правильно определилась родителям. А по ширине блок не тянется, т.к. четко задана размерность. Но опять же, если нужен совсем адаптивный макет, то ширину можно задать в % и будет тянуться в зависимости от размера окна браузера.