css - How to split html form in 2 columns only for some rows -


could me please splitting rows in 2 columns

here html

body {    font-family: 'arial', serif;    max-width: 100%;    padding: 0px 30px;  }    h1 {    margin-bottom: 0px;  }    p {    text-align: center;    margin-top: 0px;  }    fieldset {    margin-bottom: 15px;    padding: 10px;    border-radius: 5px;    border-width: 1px;  }    legend {    padding: 0px 3px;    font-weight: bold;    font-variant: small-caps;  }    label {    width: 110px;    display: inline-block;    vertical-align: top;    margin: 6px;  }    textarea {    width: 100%;  }    input:focus {    background: #ebebe3;  }    textarea {    height: auto;    weidth: 100%;  }    select {    width: 254px;  }    .buttonholder{       text-align: center;  }    input[type=text] {    border-radius: 3px;  }    input[type=choice] {    border-radius: 3px;  }    input[type=submit] {    padding: 9px;    width: 80px;    background-color:#2c3e50;    color:#fff;    position:relative;  }    .list {    width:100%;    height:100px;    overflow-y: scroll;    border:0.1px solid;  }  .content {      width:620px;      float:left;  }    .sidebar {    float:left;     width:340px;  }
<form action="#" >    <p>Форма отзыва</p>    <fieldset>      <legend>Личные данные</legend>        <div class="content">        <label for="id">id отзыва</label>        <input type="text" id="id" placeholder="12345" autofocus>        </div>        <div class="sidebar">         <label for="name">Имя путешественника</label>        <input type="text" id="name" value="Кекс">        </div>    </fieldset>    <fieldset>      <legend>Отзыв о поездке</legend>        <label for="country">Страна визита</label><br>        <input type="text" id="country">        <label for="city">Город</label><br>        <select type="choice">        <option value="oslo">Осло</option>        <option value="bergen">Берген</option>        <option value="tromse">Тромсе</option>        <option value="tronheim">Тронхейм</option>  </select>        <label for="gender">Оценка поездки</label><br>        0        <input type="range" name="a" value="98">        10        <input type="number"  name="b" value="10">        <br><br>        <label for="comments">Текст отзыва</label><br>        <textarea id="comments" value="Это было просто мяу!"></textarea>    </fieldset>      <fieldset>      <legend>Оценка отеля</legend>      <label for="hotelname">Название отеля</label><br>      <input type="text" id="hotelname" placeholder="Название по-английски"><br>      <label for="date">Дата въезда</label><br>      <input id="date" type="date" placeholder="В формате дд-мм-гггг"><br>      <label for="color">Цвет кроватки</label><br>      <input id="color" type="color" value="#ff0000"><br>      <label for="lunches">Оценка обедов</label><br>       <select>        <option value="good">Подушечки оближешь</option>        <option value="disgusting">Отвратительно</option>        <option value="very poor">Очень плохо</option>  </select><br>      <label for="fish">Самая вкусная рыба</label><br>  <div class="list">  <ul>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  <li>this li....</li>  </ul>  </div>    </fieldset><br>    <div class="buttonholder">    <div class="buttons">    <input type="submit" value="Оценить">    <input type="submit" value="Сбросить">      </div>    </div>   </form>

i know form row , far away desirable look @ moment appreciate advices on this.

thanks in advance

use bootstrap create form. bootstrap uses functionality of dividing row parts of equal lengths. use div class="row" similar set of rows, ie. ones without 2 colums , ones 2 columns. divide row 2 parts using div class="col-sm-6" or appropriate match sum of 12 contents of row.


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -