Помогите правильно разместить обьекты

[kukurikan]

Здрасьте!

Не могу правильно разместить обьекты в div. Помогите пожалуйста

имеются обьекты:

1 div (контейнер)

2 h2 (заголовок)

3 img (картинка слева)

4 p (описание картинки)

Делаю так:

<div style="border:1px solid #bbb;">
<h2>Заголовок</h2>
<img src="" style="float:left;width:100px;height:100px;" />
<p>теkст описание картинки</p>
</div>

Все бы хорошо, но как только текст не превышает высоты картинки, то нижний бордюр перекрывает картинку.

Подскажите как правильно решить эту проблему?

Спасибо.

Edited March 23, 2011 by kukurikan

[notTrue]

  On 3/23/2011 at 6:47 PM, kukurikan said:

Здрасьте!

Не могу правильно разместить обьекты в div. Помогите пожалуйста

имеются обьекты:

1 div (контейнер)

2 h2 (заголовок)

3 img (картинка слева)

4 p (описание картинки)

Делаю так:

<div style="border:1px solid #bbb;">
<h2>Заголовок</h2>
<img src="" style="float:left;width:100px;height:100px;" />
<p>теkст описание картинки</p>
</div>

Все бы хорошо, но как только текст не превышает высоты картинки, то нижний бордюр перекрывает картинку.

Подскажите как правильно решить эту проблему?

Спасибо.

Отмените обтекание:

<div style="border:1px solid #bbb;">
<h2>Заголовок</h2>
<img src="" alt="img" style="float:left;width:100px;height:100px;" />
<p>теkст описание картинки</p>
<div style="clear:left;"></div>
</div>

Edited March 23, 2011 by notTrue

[kukurikan]

  On 3/23/2011 at 7:11 PM, notTrue said:

Отмените обтекание:

<div style="border:1px solid #bbb;">
<h2>Заголовок</h2>
<img src="" alt="img" style="float:left;width:100px;height:100px;" />
<p>теkст описание картинки</p>
<div style="clear:left;"></div>
</div>

Спасибо

[mishaga]

очень желательно, чтобы этот новый div

<div style="clear:left;"></div>

не был пустым, нужно, чтобы в нём был контент

если это последний элемент на странице (за ним идёт только </body>), то вставь внутрь хотя бы неразрывный пробел ( )

Edited March 23, 2011 by mishaga

[kukurikan]

  On 3/23/2011 at 10:49 PM, mishaga said:

очень желательно, чтобы этот новый div

<div style="clear:left;"></div>

не был пустым, нужно, чтобы в нём был контент

если это последний элемент на странице (за ним идёт только </body>), то вставь внутрь хотя бы неразрывный пробел ( )

обязательно учту

А как наложить input на картинку? вот:

<table>
<tr>
<td><label><input type="checkbox" name="DelFoto[]" value="1" /><img src="1.jpg" alt="1.jpg" /></label></td>
<td><label><input type="checkbox" name="DelFoto[]" value="2" /><img src="2.jpg" alt="2.jpg" /></label></td>
<td><label><input type="checkbox" name="DelFoto[]" value="3" /><img src="3.jpg" alt="3.jpg" /></label></td>
<td><label><input type="checkbox" name="DelFoto[]" value="4" /><img src="4.jpg" alt="4.jpg" /></label></td>
<td><label><input type="checkbox" name="DelFoto[]" value="5" /><img src="5.jpg" alt="5.jpg" /></label></td>
</tr>
</table>

Пробовал:

<td><label><input style="float:left;" type="checkbox" name="DelFoto[]" value="1" /><img src="1.jpg" alt="1.jpg" /></label></td>

не помогло

[SelenIT]

  Quote

нужно, чтобы в нём был контент

Лучше обойтись без этого элемента вообще. Напр., заменив его псевдоэлементом :after (легендарный .clearfix) или задав контейнеру отдельный контекст форматирования (с помощью overflow:hidden или display:table). А то ублажать Tidy (даже не валидатор!), вставляя в ненужный элемент еще более ненужный невидимый текст — по-моему, всё равно, что делать педикюр на деревянной ноге...

  Quote

как наложить input на картинку?

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

Если она несет какой-то смысл, то надежнее всего — абсолютным позиционированием. Но зачем?

[kukurikan]

  On 3/24/2011 at 3:44 PM, SelenIT said:

Лучше обойтись без этого элемента вообще. Напр., заменив его псевдоэлементом :after (легендарный .clearfix) или задав контейнеру отдельный контекст форматирования (с помощью overflow:hidden или display:table). А то ублажать Tidy (даже не валидатор!), вставляя в ненужный элемент еще более ненужный невидимый текст — по-моему, всё равно, что делать педикюр на деревянной ноге...

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

Если она несет какой-то смысл, то надежнее всего — абсолютным позиционированием. Но зачем?

вот мне и хотелось узнать как сделать позиционированием

[SelenIT]

Лейблу — position: relative, инпуту — position: absolute и координаты, какие надо... и размеры для подстраховки, а то чекбоксы в браузерах по умолчанию сильно разнятся.

[kukurikan]

  On 3/24/2011 at 7:36 PM, SelenIT said:

Лейблу — position: relative, инпуту — position: absolute и координаты, какие надо... и размеры для подстраховки, а то чекбоксы в браузерах по умолчанию сильно разнятся.

огромное спасибо