Проблема такова, по горизонтали 4 блока ,не могу понять как сделать ,чтоб при добавлении блоков они вставали друг под другом? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>our team</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function blinkIt() { if (!document.all) return; else { for(i=0;i<document.all.tags('blink').length;i++){ s=document.all.tags('blink'); s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible'; } } } </script> </head> <body> <div class="container"> <div class="header"> </div><!-- end .header--> <div class="content"> <div class="grid"> <div class="imgholder"> <img src="img/1.jpg"/> </div> <strong>Совет Директоров</strong> <blink>В этом отделе есть вакантное место</blink> <div class="meta"></div> </div> <div class="grid"> <div class="imgholder"> <img src="img/4.jpg" /> </div> <strong>Отдел торговли.</strong> <p>В этом отделе есть вакантное место</p> <div class="meta"></div> </div> <div class="grid"> <div class="imgholder"> <img src="img/6.jpg" /> </div> <strong>Бухгалтерия.</strong> <p>В этом отделе есть вакантное место</p> <div class="meta"></div> </div> <div class="grid"> <div class="imgholder"> <img src="img/3.jpg"/> </div> <strong>Отдел кадров</strong> <p>В этом отделе есть вакантное место</p> <div class="meta"></div> </div> <!-- end .content --></div> <!-- end .container --></div> </body> </html> @charset "windows-1251"; body { margin:0; padding:0; background: url(img/2X.png); color:#333; font-family:Cambria, Georgia, serif; font-size:15px; overflow-x:hidden; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a img { border: none; } header, section, footer, hgroup{ display:block; } a { color:#35BFFF; text-decoration:none; } .container { position:relative; width:980px; margin:0 auto; padding-bottom: 10px; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; } .content { width: 970px; right: auto; margin: 5px; float: left; } .grid{ width:200px; min-height:100px; padding: 15px; background:#fff; margin:5px; font-size:12px; float:left; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; } .grid strong { border-bottom:1px solid #ccc; margin:10px 0; display:block; padding:0 0 5px; font-size:17px; } .grid .meta{ text-align:right; color:#777; font-style:italic; } .grid .imgholder img{ max-width:100%; background:#ccc; display:block; } @media screen and (max-width : 1240px) { body{ overflow:auto; } } @media screen and (max-width : 900px) { @charset "windows-1251"; body { margin:0; padding:0; background: url(img/2X.png); color:#333; font-family:Cambria, Georgia, serif; font-size:15px; overflow-x:hidden; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a img { border: none; } header, section, footer, hgroup{ display:block; } a { color:#35BFFF; text-decoration:none; } .container { position:relative; width:980px; margin:0 auto; padding-bottom: 10px; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; } .content { width: 970px; right: auto; margin: 5px; float: left; } .grid{ width:200px; min-height:100px; padding: 15px; background:#fff; margin:5px; font-size:12px; float:left; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; } .grid strong { border-bottom:1px solid #ccc; margin:10px 0; display:block; padding:0 0 5px; font-size:17px; } .grid .meta{ text-align:right; color:#777; font-style:italic; } .grid .imgholder img{ max-width:100%; background:#ccc; display:block; } @media screen and (max-width : 1240px) { body{ overflow:auto; } } @media screen and (max-width : 900px) {
