У меня следущая ситуация : есть код html в котором есть блоки div с картинками и текстом, есть css документ в котором я задавал свойство float:left для этих блоков чтобы они обтекали друг друга. Мне нужно сделать так чтобы когда в браузере изменить ширину на определённое количество, тогда третий блок с едет вниз и станет по ширене как те два блока что остались. При это нужно чтобы картинки изменялись пропорционально окну браузера. Очень надо решить проблему помогите пожалуйста.
вот html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="block1" class="block">
<p align="center" class="img_bottom"><img src="images/img1.png" alt="img1" width="260" height="150"></p>
<p style="padding-left:125px; padding-top:10px; margin:0; padding-bottom:0;">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv2.jpg">
</p>
<p class="hed">New Zealand Timelapse</p>
<p class="hed1">Equipé de son appareil Canon 5D Mark II, le réalisateur Bevan Percival nous offre une nouvelle vidéo en technique timelapse absolument magnifique</p>
</div>
<div id="block2" class="block">
<p align="center" class="img_bottom"><img src="images/img2.png" alt="img2" width="260" height="150" ></p>
<p style="padding-left:125px; padding-top:10px; margin:0; padding-bottom:0;">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv2.jpg">
<img src="images/zv2.jpg">
</p>
<p class="hed">New Zealand Timelapse</p>
<p class="hed1">Equipé de son appareil Canon 5D Mark II, le réalisateur Bevan Percival nous offre une nouvelle vidéo en technique timelapse absolument magnifique</p>
</div>
<div id="block3" class="block">
<p align="center" class="img_bottom"><img src="images/img3.png" alt="img3" width="260" height="150"></p>
<p style="padding-left:125px; padding-top:10px; margin:0; padding-bottom:0;">
<img src="images/zv.png">
<img src="images/zv.png">
<img src="images/zv2.jpg">
<img src="images/zv2.jpg">
<img src="images/zv2.jpg">
</p>
<p class="hed" class="hed">New Zealand Timelapse</p>
<p class="hed1">Equipé de son appareil Canon 5D Mark II, le réalisateur Bevan Percival nous offre une nouvelle vidéo en technique timelapse absolument magnifique</p>
</div>
</div>
</body>
</html>
CSS:
body{
background-image:url(images/bg.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
#wrapper{
width:100%;
height:900px;
margin:0 auto;
padding:0 ;
}
.block{
width: 25%;
height:300px;
outline:1px solid red;
float:left;
background-color:#ffffff;
min-width:190px;
}
#block1{
margin-left:100px;
margin-top:300px;
}
#block2{
margin-left:50px;
margin-right:50px;
margin-top:300px;
}
#block3{
margin-right:100px;
margin-top:300px;
}
.hed{
font-family:Arial;
font-weight:bold;
font-size:10px;
color:#333333;
text-transform:uppercase;
text-align:center;
margin-top:0;
padding-top:5px;
margin-bottom:0;
padding-bottom:0;
}
.hed1{
font-family:Arial;
font-size:11px;
color:#a1a1a1;
text-align:justify;
word-spacing:4px;
padding-left:20px;
padding-right:20px;
margin-top:0;
padding-top:5px;
}
.img_bottom{
margin-bottom:0;
}