У меня есть еще один вопрос (первый здесь: html, css с проблемой div-центра )
Итак, у меня есть три столбца на моей веб-странице, и когда я помещаю изображение вЯ хочу уменьшить окно (браузер), изображение «идет» за другим div.Это довольно хорошо, но я бы хотел, чтобы этот div прекратил уменьшаться и вес изображения становился весом div, или что-то в этом роде.
Извините, я не знаю, чтобы объяснить это по-английски, поэтомуЯ постараюсь в изображениях:)
развернуто: 
на этом этапе, он должен остановиться: 
и не делать этого:
html part
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styl.css">
<title>Title goes here</title>
</head>
<body>
<div id="cela">
<div id="header">
<p>hlavicka</p>
</div>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="lavy"><p><img src="http://akiscode.com/projects/SOS/chuck_norris_random_fact_generator_6_3957_2224_image_2561.jpg", width="150"/ > Etiam ante est, tempus vitae adipiscing ac, luctus ut massa. Vestibulum malesuada,</p><div class="clear"></div>
</div>
<div id="stredny"><p>Mauris orci erat, </p></div>
<div id="pravy"><p></p></div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
css part
img
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}
.clear {
clear:both;
width:100%;
}
#cela {
width: 80%;
margin-left: auto;
margin-right: auto;
border: 1px #110000 solid;
}
#header
{
padding:20px;
background:#008000;
}
#footer
{
clear: both;
padding:20px;
background:#008000;
}
#container3 {
float:left;
width:100%;
background:#CCFFCC;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:#66FF66;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:#00FF00;
position:relative;
right:40%;
}
#container0 {
float:left;
width:100%;
background:white;
position:relative;
right:0%;
}
#lavy
{
float:left;
width:28%;
position:relative;
left:72%;
overflow:hidden;
}
#stredny
{
float:left;
width:38%;
position:relative;
left:74%;
}
#pravy
{
float:left;
width:28%;
position:relative;
left:76%;
}
Я пытался использовать переполнение: прокрутка, но результат не очень эстетичный