Приключения float, clear и двухколоночного макета

[Veseloff]

В общем, задача сделать что-то типа блога. Макет — духколоночный. Слева маленькая колонка, справа — контент. В «контенте» идёт заголовок-ссылка на страницу и анонс этой самой страницы — таких блоков (заголовок-анонс) на странице по нескольку штук. Но вот только есть одна неприятность.

Вот примерно что нужно. Вроде всё так, как я хочу. Но тут возникает проблема с картиками, у которых есть флоат — блоки начинают тоже обтекать картинку, это не есть гуд. Пытаемся решить проблему при помощи clear — блоки встают в порядке нормальной очереди, но вот только вся колонка сползает вниз. Помогите, люди добрые! Хочется и рыбку съесть и, чтобы блоки не уползали.

[psywalker]

А я не понял, в чём именно проблема. Я так понимаю, нужно чтобы картинка (float:left) всегда была слева, а текст справа, даже когда его много, нужно чтобы он НЕ залезал под левую картинку?

[Veseloff]

Ну вот как на хабре, например — такая же структура, только там узкая колонка не слева, а справа. Идёт блок: ссылка-заголовок на пост, а потом небольшой анонс. Таких блоков на странице несколько штук. В анонсе может быть картинка с флоатом. Если текст «короче» по высоте, чем картинка, то следующий блок тоже начинает обтекать эту картинку — на втором макете это видно. А мне это не нравится очень. Картинка в анонсе так же может быть выровнена и по правому краю. А может её и не быть вовсе. Я хочу, чтобы следующий блок никак не залезал в предыдущий, а начинался с новой строки.

[SEObomj]

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
		#left {
			width: 300px;
			background-color: #eee;
			float: left;
		}

		#content {
			margin-left: 320px;
		}

		.block {
			margin-bottom: 20px;
clear:left;
		}

	</style>

[Veseloff]

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
		#left {
			width: 300px;
			background-color: #eee;
			float: left;
		}

		#content {
			margin-left: 320px;
		}

		.block {
			margin-bottom: 20px;
clear:left;
		}

	</style>

Чёт я не просёк. А в чём отличие от третьего темплейта?

[rediskavet]

#content {
	  margin-left: 320px;
	  overflow:hidden;

}

если я правильно понял что требуется.

[SEObomj]

Чёт я не просёк. А в чём отличие от третьего темплейта?

Упс, третий не глянул)

[deadrash]

Открыл пример http://borber.ru/htmlbook/template2.html

Добавил для .block свойство float:left; посмотрел везде работает нормально, не понял что у вас не получается. Может я вопрос не правильно понял?

upd>

Если ширина блоков не задана, тогда в конце каждого .block блока перед </div> можно добавлять <p style="clear: both;"></p>

Edited January 8, 2011 by deadrash

[psywalker]

Я тоже не могу въехать в задание, в чём сложность? Вот этот текст можно поместить в отдельный див и ему задать клеар?

А вот тут какой-то текст. И как будто бы всё в порядке... Но вот здесь появляется картинка, с обтеканием текста. А сам текст короткий.

Заголовок блока

Этот блок тоже обтекает картинку. Хотя нам этого не надо.

Заголовок блока

И этот тоже.

Вот на этой странице http://borber.ru/htmlbook/template2.html

Veseloff

Дружище, смотри, я так понимаю. Нужно, чтобы было как тут http://borber.ru/htmlbook/template1.html , НО если в тексте справа появляется картинка с флоат, то этот текст начинает и ЕЁ обтекать. А нужно, чтобы он её НЕ обтекал, а располагался снизу под ней?

Если так, то в чём проблема сделать так, как я выше предложил?