Наложение блоков div друг на друга

[m2141]

Добрый день!

Не очень опытна в верстке блоками, поэтому хотела бы обратиться за помощью и подсказкой.

Нужно сделать вот в таком виде:

Я тупо решила это, позиционируя блоки с relative. Но что-то мне подсказывает, что решение очень неудачное, и все может сползти...

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

[Modestes]

С relative все правильно, ничего у вас не сползет(если не поставите absolute), c margin тоже можно сместить, задав отрицательное значение, но лучше использовать их по своему назначению, position для позиционирования, а margin для внешнего отступа

А вот насчет блока-2 и текста-2 не понял, куда они должны смещаться, красная линия на рисунке у вас слева.

Не плохо было бы видеть готовый вариант как должно быть.

Edited June 4, 2012 by Modestes

[m2141]

Извиняюсь, смещаться влево конечно, до красной линии. Ошиблась.

Грубо говоря надо, чтобы это все было резиновым, и сужалось до определенной ширины. Но размеры самих блоков фиксированные.

Было как на первом рисунке, стало так:

[Modestes]

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

[m2141]

Спасибо, но собственно и проблема, что так просто все не получается... У меня вот что получается таким образом на деле, именно при добавлении float: right; для блока2 :

Собственно код:

#main-page
{
width: 100%;
min-width: 600px;
position: relative;
top: 0;
left: 0;
}

#block1
{
position: relative;
top: 20px;
left: 20px;
width: 516px;
height: 358px;
background: #ccc;
}

#block2
{
position: relative;
top: -150px;
float: right;
width: 521px;
height: 305px;
background: #ccc;
}

Оранжевым пунктиром идет как раз блок main-page.

И все это еще лежит в "контейнере" с заданной шириной 100%, включая правую колонку, на которую сползло.

То что сделано черной заливкой (чтобы посмотреть куда и что так растягивается) - это заливка тега html.

Не понимаю вообще, почему так происходит... Уже много раз перепроверяла. По высоте кстати тоже странно сползает все, и так же html куда-то растягивается при определенных условиях...

Edited June 5, 2012 by m2141

[m2141]

Вообще у меня с html тегом что-то непонятное. Например вот еще footer я прижала с помощью margin, вроде все верно. Но только в опере это верно отображается, в остальных браузерах остается внизу полоска пустого место (опять же черной заливкой сделала). К тому же, если я main-page задаю меньшую фиксированную высоту, футер поднимается вверх, собственно к низу монитора, где должен быть визуально, но под ним еще остается много пустого пространства и прокрутка образуется. Хотя высота фактическая у html вроде бы правильная, что видно на картинке, но заливка то внизу есть... Тоже не пойму в чем дело.

[m2141]

Последний вопрос очень актуален! Почему так происходит в Firefoxе, в остальных браузерах все нормально - футер прижат к низу, прокрутки нет.

Не могу никак найти в чем дело... может в таблицах? Тут про это писали, что у Firefox какие-то проблемы с ними, а у меня часть контент состоит из таблицы.