Вёрстка « Как выстроить блоки div слева направо до конца родителя, а потом вниз?

Получается что блоки выстраиваются вниз, а не слева направо, а потом уже вниз.
Как сделать нужное мне расположение слева на право?

Что получается:


html:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div id="benefits-text">
<div id="benefits-text-2"><h2><img src="img/strelka.png" alt="strelka" width="11" height="12" /><span class="style4">Наши преимущества:</span></h2></div>
<div id="benefits-text-menu">
  <div id="benefits-text-menu-text">
  <h3><span class="style5">Бесплатный выезд и диагностика</span></h2>
  </div>
  <div align="right"><img src="img/galka.png" alt="galka" width="19" height="17" /></div>
</div><!--Конец benefits-text-menu-->

<div id="benefits-text-menu">
  <div id="benefits-text-menu-text">
  <h3><span class="style5">Бесплатный выезд и диагностика</span></h2>
  </div>
  <div align="right">
  <img src="img/galka.png" alt="galka" width="19" height="17" /></div>
</div><!--Конец benefits-text-menu-->

<div id="benefits-text-menu">
  <div id="benefits-text-menu-text">
  <h3><span class="style5">Бесплатный выезд и диагностика</span></h2>
  </div>
  <div align="right">
  <img src="img/galka.png" alt="galka" width="19" height="17" /></div>
</div><!--Конец benefits-text-menu-->

<div id="benefits-text-menu">
  <div id="benefits-text-menu-text">
  <h3><span class="style5">Бесплатный выезд и диагностика</span></h2>
  </div>
  <div align="right">
  <img src="img/galka.png" alt="galka" width="19" height="17" /></div>
</div><!--Конец benefits-text-menu-->

</div> <!--Конец benefits-text-->
 


Css:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }

#benefits-text {
width:680px;
height:200px;
float:right;
}
#benefits-text-menu {
width:210px;
height:50px;
margin:10px;
}
#benefits-text-menu-text {
width:190px;
height:40px;
float: right;
}
 
0
css div блоки верстка

1 ответов

Во-первых, id необходимо использовать для уникальных элементов на странице - в вашем случае правильнее использовать классы для "#benefits-text-menu" и "#benefits-text-menu-text".
А ваша проблема решается так:


#benefits-text-menu {
width:210px;
height:50px;
margin:10px;
float:left;
}
 
3