Помогите сделать блоки div в ряд

[Azazello77]

Есть страница Для просмотра ссылки Войди или Зарегистрируйся
нужно привести её к виду, как на миниатюре

при использовании

product-info .options {

1. display: inline;
2. margin-bottom: 10px;
3. overflow: hidden;

ничего не происходит

(правый столбец с ценой пока не важен)

 

[igorenia]

Так у вас в div'ах класс "option", а в css - "options".

 

[Q_BASIC]

.option {
float: left;
}
.clear {
clear: both;
}

После элемента, где нужен перенос ставите

<div class="clear"></div>

 

[VaiZerD]

еще желательно указать width

 

[pop00]

Есть страница Для просмотра ссылки Войди или Зарегистрируйся
нужно привести её к виду, как на миниатюре

при использовании

product-info .options {

1. display: inline;
2. margin-bottom: 10px;
3. overflow: hidden;

ничего не происходит

(правый столбец с ценой пока не важен)

.options .option { display:block; float:left; margin-right: 10px; margin-bottom: 10px; }

 

[cellse]

Зачем float'ы ?
Нужно изменить разметку малость. Чтобы сделать как на картинке.
Блок .price надо вложить внутрь .options
Ну и тд. Разметку сначала нормально сделайте, а потом уже за стили.

1. display: inline;
2. margin-bottom: 10px;
3. overflow: hidden;

ничего не происходит

Конечно не происходит, margin со строчными элементами не работает.

 

[flank911]

Уберите display:inline;

 

[uniqueart]

Как-то так, позиционирование точно будет как на картинке, а там уже мелочи поправить по отступам и прочее.

<div class="clearfix">   
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Тип визы:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Требуемая ЗП:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Возраст:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Город:</b></div><br>
          <select>
             <option>Пункт 1</option>
             <option>Пункт 2</option>
          </select>
   </div>
</div>
<div class="clearfix">
   <div class="col-50">    
      <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>История работы в Корее:</b></div><br>
          <textarea></textarea>
       </div>
   </div>
   <div class="col-50">    
      <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Опыт работы:</b></div><br>
          <textarea></textarea>
       </div>
   </div>
</div>

.option { 
   min-width: 185px;
   margin-right: 20px;
   display: inline-block;
   vertical-align: top;
   position: relative;
}
.col-50 {
   float: left;
   width: 50%;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

 

[Relimeyt]

display:inline-block;
width: 200px;
float: left;

Должно получиться