Проблема с float: left

[Diver2]

Добрый день,

Подскажете, пожалуйста, как исправить такую ошибку:

Слой с float: left в ие7 после окончания колонки, которую он обтекает, уменьшает padding.

Наглядно:

html

	<div style="float: left"> <img src="/i/image.jpg" style="margin: 0; padding: 0">
	</div>

	<div class="ctlg">
	  <div><h3>title</h3>

	<ul>
		<li>Фильтр для очистки и минерализации мягкой воды</li>
		<li>Картридж</li>
		<li>Угольная <a href="#">вставка УВ</a></li>
		<li>Дозаторы <a href="#">кальция</a> и <a href="#">магния</a></li>
		<li>Возможность регенерация картриджа</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>

	</ul>

	  </div>
	</div>

css

div.ctlg {

	background: url('/i/cbg_b.png') no-repeat; 
	background-position: 133px 100%;
}

div.ctlg div {

	background: url('/i/cbg.png') no-repeat; 
	background-position: 133px 0; 
	padding: 0 60px 10px 143px

}

div.ctlg div h3{

	color: #2abc54; 
	padding: 5px 0 5px 25px

}

div.ctlg div ul {

	margin: 20px 0 10px 32px;	

}

Заранее спасибо.

[psywalker]

Diver2

Попробуй поставить ul{overflow: hidden; или height: 1%;}

[sandro-css]

Чтобы не прерывалось обтекание, следует профлоатить 2 блока, а не один, короче

div.ctlg {background:url('/i/cbg_b.png') no-repeat 133px 100%; float:left;}

+ нужна очитска флоатов), ну это если дальше ничего флоатится не будет

Edited May 18, 2009 by sandro-css

[Diver2]

psywalker

Конкретно height: 1% помог, но в итоге вызвал новый глюк - часть маркеров просто исчезла.

В итоге я успел понять, что писать придется как рекомендуется на htmlbook'е, то, о чем написал sandro-css

следует профлоатить 2 блока

И все заработало.

Но логически я этого так и не понял. Мне не ясно, зачем ставить второму слою обтеканию (хотя его ничего не обтекает) и потом тут же отменять.

На уровне "это косяк IE, такое решение кроссбраузерно и работает" я въехал. Но в чем смысл такого действия - нет.

P.S. psywalker, sandro-css, спасибо, что откликнулись.

Edited May 19, 2009 by Diver2

[Nekromancer]

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

[sandro-css]

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

А вообще можно было и ничего не флоатить, а обернуть в див <div class="ctlg"> и этому диву задать бэкграунд в виде той картинки, а <div class="ctlg"> поставить отступ нужный

<div class="bg">
<div class="ctlg">
	  <div><h3>title</h3>

	<ul>
		<li>Фильтр для очистки и минерализации мягкой воды</li>
		<li>Картридж</li>
		<li>Угольная <a href="#">вставка УВ</a></li>
		<li>Дозаторы <a href="#">кальция</a> и <a href="#">магния</a></li>
		<li>Возможность регенерация картриджа</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>
		<li>Выпускается в прозрачном и белом корпусах</li>

	</ul>

	  </div>
	</div>
</div>

style .bg {background:url('/i/image.jpg' no-repeat); padding:..... ..... ..... .....px;}

p.s. пожалуйста

Edited May 21, 2009 by sandro-css