Блочная вёртска div, как её делать?

Adar, 378 просмотров

Пытаюсь научиться пользоваться вёрсткой DIV. У меня есть три блока и расположиться они должны:

---------- ----------
| div1 | | |
---------- | div3 |
---------- | |
| div2 | | |
---------- ----------

Надеюсь понятно.

То есть два блока друг под другом слева и один справа, и тот что справа той же высоты, чтобы и два левых вместе ( или наоборот высота этих двух по вертикали такая же как у правого блока)

Примечание:
Alek-IT а подсказать? Спасибо я CSS и без Вас изучаю, только сверстать три блока мне надо сейчас. Не отвечайте если не хотите...

Примечание:
Какой лучше Сергея или Павла? Мне ближе конечно Павла. А вот мой вариант:

<div style="margin:10px 0 0 0px; clear:both;">
<div style="width:180px; float:left">1
</div>
<div style="margin:10px 0 0 0;width:180px float:left">2
</div>
<div style="height:600px; width:120px;">3
</div>
</div>

Примечание:
только здесь выходит что справа блок два

Примечание:
Попробовал я так:
<div style="float:left; margin:10px 0 0 0px">
<div id="sidebar-left" style="width:180px">
</div>
<div id="sidebar-left" style="width:180px; margin:10px 0 0 0px">
</div>
</div>
<div id="sidebar-left" style="margin:10px 0 0 10px; width:120px; height:600px">
</div>

Вышла лажа, попробовал relative на третий див ставить тоже фигня.

Примечание:
vadim5june

Всё оказывается не в сайдбаре, а в левом углу страницы

Примечание:
Спасибо я настроил, по поводу id и style согласен, вчера в сайдбаре у всех дивов поубирал style в css, тем более как оказалось я всё это уже прописал, получался дубляж.

Ответы:

Alek-IT

Вы не чего не путаете?
А то не понятно, Вы просите разобраться в вопросе или сделать за Вас?
Учите CSS и пытайтесь что-то сами сделать или копируйте готовые шаблоны.

Кигбамбул

И? div3 - relative, di1, div2 - absolute.

Безруков Павел

я бы реализовал это с использованием вспомогательного блока див 4 объединяющего в себе див1 и див2

Вадим Виглянски

<div style='position:absolute;top:0px;left:0px;width:120px;height:200px;background:red;border: 4px
solid black;overflow:auto'>qqq</div><div
style='position:absolute;top:200px;left:0px;width:120px;height:400px;background:green;border: 4px
solid black;overflow:auto'>qqq</div><div
style='position:absolute;top:0px;left:120px;width:180px;height:600px;background:gray;border: 4px
solid black;overflow:auto'>qqq</div>
-----------------------------------
Adar:Всё оказывается не в сайдбаре, а в левом углу страницы
..а где там про сайдбар говорится только о трех дивах
можно еще написать
<div style='position:absolute;left:200px;top:150px;width:300px;height:600px;overflow:hidden'>..здесь вставить то что выше...</div>
и задавая top и left перемещать куда нужно

Alex Korn

Дело в том, что контейнер <div> по дефолту занимает всю ширину страницы, поэтому указать фиксированную ширину тебе нужно именно у того дива, который содержит в себе сайдбары.
а css учить надо, да... id и style вместе - не комильфо...

15 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.