DIV"ы наползают друг на друга

[Atip]

Знаю вопорс элементарный и ответ наверняка есть на форуме. Но поскольку я только-только начал осваивать css, то большинство ответов, которые я нашёл, мне не понятны, а готовые решения мне не нужны - хочу сам научиться. Читал описание позиционирования элементов на этом сайте, но отличия очень смутно понимаю. Поэтому решил создать новую тему.

Имеется вот такая беда:

HTML:

<div class="mes_body">
<div>
<div class="mes_info">
Текст левой колонки
<div class="price">
Цена находится под текстом слева
</div>
</div>
<!--Фото, тут код не убирал, чтобы не убрать ничего лишнего-->
<div class="mes_photo">
{%if $message.fields.i|@count > 0%}
	<div align="center">
    Нажмите на фото, чтобы увеличить<br />
	<div class='otherimages'>
	{%foreach  from=$message.fields.i item='image' key='key'%}
		<a class="zoom" rel="group{%$message.id%}" title="{%$image.name%}"  href="{%$settings.patch%}uploads/images/tb/{%$image.value%}"><img style='vertical-align: middle;' src="{%$settings.patch%}uploads/images/ts/{%$image.value%}" title="{%$message.title%} - {%$image.name%}" alt="{%$image.name%}" border="0"></a>
	{%/foreach%}
	<br /><font color="#D6DAE1" size="2px">Текст под фоткой</font>
    </div>
	</div>
{%/if%}
</div>
<!--Конец фото-->
</div>


<!--Текст объявления-->
<div class="mes_text">{%$message.text%}</div>
<!--Текст объявления конец-->

<div>
<p class="contact">Связаться с автором объявления:</p>
Блок находится под текстом сообщения, слева
</div>

<p class='social'>Добавьте объявление в соц. сети и закладки:</p>
скрипт соц кнопок

</div>

CSS:

div.mes_body
{
background:none;
}

div.mes_info
{
text-align:left;
margin-top:20px;
margin-bottom:20px;
float:left;
height:140px;
}

div.mes_photo
{
height:140px;
margin-bottom:1px;
margin-left:1px;
}

div.price
{
width:200px;
font-size:14px;
text-align:center;
border: 1px dotted #F30;
padding:10px;
margin-top:10px;
}

div.mes_text
{
width:100%;
text-align:left;
font-size:12px;
margin-top:20px;
padding:10px;
}

p.contact
{
font-size:14px;
font-weight:bold;
margin-top:15px;
margin-bottom:5px;
}

div.otherimages
{
margin:3px;
padding:3px;
}

div.otherimages img
{
margin:3px;
}

.social
{
font-weight:bold;
color:#228B22;
margin-top:15px;
margin-bottom:5px;
}

на моём разрешении, в полный размер окна всё отображается хорошо: http://clip2net.com/s/1605B

А вот на другом разрешении или если просто уменьшить окно браузера фото наползает на всё остальное: http://clip2net.com/s/1605S

Помогите, пожалуйста, разобраться где моя ошибка. Пробовал позиционировать элементы по-разному (absolute, relative тд), но ничего хорошего из этого не вышло

Edited August 6, 2011 by Atip

[flagreit]

width или min-width для основного контейнера (mes_body) вам в помощь.

[Atip]

Спасибо за совет.

Но при использовании width или min-width блок будет оставаться определённого размера.

а если сделать так, чтобы контейнер с фотками "сползал" вниз (также, как и сейчас), но чтобы он смещал вниз все контейнеры, которые находятся под ним?

Edited August 6, 2011 by Atip