Верстка слоями и дивами, как сделать блоки

Делаю один сайтик. Возникла такая вот проблема: у меня должен быть список контентов с блоками одного формата: заголовок статьи, а под ним слева картинка к статье ограниченная по ширине и рядом с ней текстовое описание (фрагмент статьи) после чего разделительная полоса, а за ней еще один подобный блок. Таблицами верстать это не хочется. Я пока что сделал эти блоки так:

с такой вот таблицей стилей:

Хочу избавиться от лишних "<br><br><br><br><br>", но при этом высокие картинки "налазят" на идущие ниже заголовки.
Может кто-то подскажет что нужно сделать, чтобы высокие картинки не "налазили" на заголовки ниже без использования таблиц?

Вам нужно было оставить ссылку на страницу, где Вы это делаете, чтобы видно было проблему, моё лично мнение, делать вёрстку полностью в слоях, без табличного каркаса - "гемор", я люблю делать резиновый каркас из таблиц, а остальное всё уже в CSS

Не проблема. Я могу дать ссылку на то место где сейчас находится описываемая мной ситуация, но пока в этом нету необходимости.
Проблему сейчас там не видно из-за добавленных мною пяти тегов <br>, которые временно решают проблему. И от которых я хотел бы избавиться (если это вообще возможно средствами блочной верстки).
Таблицами я умею верстать, но в этом проекте хочу от них отказаться (где это будет возможно).
Если я плохо описал ситуацию, то можно и ссылку дать.

Сообщение отредактировал podlom - 6.12.2007, 18:40

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

Если бы я использовал технику абсолютного позиционирования, то я бы мог играться со свойством z-index, но в данном случае я его не использую.
...или свойством z-index можно в моей ситуации что-то сделать?
Ладно. Попробую, но для каждого нового блока мне прийдется его значение делать все большим и большим?!

да, логично, согласно уровню вложенности

...так блоки-то одноранговые. Они на одном уровне вложенности находятся.
Короче даю ссылку, чтобы было понятно: тестовая страница Morskoi-dom.

Повторюсь: главная задача у меня избавиться как-то от ненужных тего "<br><br><br><br><br>", которые исправляют налезающие высокие картинки на нижние заголовки.

попробуйте сделать так:
добавьте стиль:

.separator { position: relative;
float: left;
width: 100%;
height: 1px;
margin: 0px;
padding: 0px; }


<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
<div class="separator"></div>
</div>
<hr>

или же так:

<hr>
<div class="cont_list">
<h2><a href="?lang_id=1&content_id=90">Карай Тако Сарада - Салат из осьминога на остром соусе</a></h2>
<div class="cont_txt">
<img src="/i.php?width=200&temp_small_img_url=/files/9/Tako.jpg" alt="Карай Тако Сарада - Салат из осьминога на остром соусе">
Взять щупальце осьминога ближе к тонкому окончанию, нарезать ее кружочком толщиной в 1 см. В отдельной миске смешать пасту момидзи ороси, мирин, сок лайма (фрэш), чесночную пасту, чёрный перец крупного помола 0.1 гр. и адзиномото. Положить туда осьминога, лук резанец, бланшированные грибы эноки. Мариновать 10 мин. салат Фризе и ростки салата шизо выложить красиво на тарелку. При подаче сбрызнуть смесью кунжутного масла и оставшегося сока лайма. Состав:1)Осьминог - 100 гр.2)Салатные ростки
<span><a href="?lang_id=1&content_id=90">Подробнее</a></span>
</div>
</div>
<div class="separator"></div>

<hr>

смысл в том, что <div class="separator"></div> будет разделять..

Пробовал оба варианта:
Вариант с разделителем внутри блока
Вариант с разделителем за блоком
К сожалению оба не подошли. (IMG:style_emoticons/default/sad.gif)
Может быть еще есть какие-то предположения как это можно сделать?

ИМХО, нельзя полностью доверять одной технологии. надо их правильно комбинировать. таблицы+слои, слои+таблицы...а если использовать только что-то одно....то это не очень удобно (IMG:style_emoticons/default/smile.gif)

Зачастую я так и делаю. Но в этот раз хочу найти универсальный способ создания красивых блоков именно технологией блочной верскти (слоями) + CSS. IMHO это будет полезно не мне одному. Такая задача думается часто встречается.

проблемма часто встречается, ибо у Мелкософта - огромные рога на тему "все сидят под ИЕ". Причем - это связано не только с версткой слоями (и ввиду того, что везде работает - а в ИЕ6 - нет, в ИЕ7 - как фишка ляжет), но и собственно с нежеланием категорировать пользователей по признаку используемого браузера.

Вот и приходится с табличками мучится

очуче6ние такоек что МС пытаются усложнить жизнь веб-дизайнерам (IMG:style_emoticons/default/smile.gif) ))) каждая новая версия ИЕ отображает одно и тоже по разному (IMG:style_emoticons/default/sad.gif)

Я думаю, что у них нету такой цели на самом деле. Просто так получается из-за того, что бюджет на развитие этого браузера ограничен, и уровень его возможностей весьма средний.

Почитай доки по слоям. Поищи в Интернете сайты по верстке слоями. Наверняка кто-то уже сталкивался с подобной задачей и не раз. Короче IMHO сплошной RTFM!

к слову - сейчас создатели ОПЕРЫ с МС судятся (IMG:style_emoticons/default/wink.gif)
надеюсь, не за горами тот день, когда МС вместо ИЕ как оболочку будет использовать...midnight commander (IMG:style_emoticons/default/smile.gif)

IGOR
веришь - иногда достает гуглить изза того, что у Гейтса и Балмера комплекс Ктулху - они хотят зОхавать всех!

По-поводу обочек для Winodws могу сказать, чо их дофига на самом деле. И некоторые из них доводилось видеть в работе. Только вот с тем, что будут что-то не Мелкософтовского производства ставить по-умолчанию мало верится что-то (IMG:style_emoticons/default/smile.gif)

сдрасте...не в том дело: 1) в основном, то просто темы оформления (то, что ты видел)...да и они еще более глючны, чем ИЕ
2) фишко в том, что в базовой поставке Маздая ВСЕГДА ИЕ и в плане того, как ИЕ интерпретирует код - мелкомяхк всегда можно обвинить в недобросовестной конкуренции

мелкомягкие в прицнипе сильно наглею. вот зачем мне в базовой поставке педиаМлеер ? (IMG:style_emoticons/default/smile.gif) я Классиком пользуюсь и Винампом. а ИЕ мне зачем? я Оперу юзаю. и вообще у них практически все встроенные утилиты какието ...кривые что-ли...неудобные....
понятно, конечно что они хотят бабла срубить, но все же....
ИМХО надо что-б ывинда поставлялась с минимальной конфигурацией, что-бы весь софт самому ставить и ИЕ был только для того что-бы зайти на сайт и скачать Оперу (IMG:style_emoticons/default/wink.gif)

+1 ...или Mozilla FireFox (кому что больше нравится) (IMG:style_emoticons/default/smile.gif)
А у меня с Медиаплеером такая беда приключилась. Купил диск. На нем в автозапуске веб страница. В ней ссылки на файлы в формате mp3 Калечно сделано одним словом.
Так вот под одним юзером работал запуск Media Player, а под другим - нет (IMG:style_emoticons/default/sad.gif)
Короче зашел еще раз под тем пользователем под которым работали ссылки - нажал открыть очередной раз mp3-шку и уже и там где работало стала ошибка вылазить.