Нужна помощь.
Есть html и css файл.
html файл.
<html>
<head>
<!-- utf8!!! или тут или в htaccess -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- utf8!!! или тут или в htaccess -->
<title>Калькулятор водоснабжения</title>
<!-- css для формы -->
<link rel="stylesheet" href="form.css" />
<!-- css для формы -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/submit.js"></script>
<script src="js/calc.js"></script>
</head>
<body id='body'>
<h1>Калькулятор стоимости колодца</h1>
<a href="/colodec/" id="back">Вернуться на главную</a>
<!-- Калькулятор -->
<form method="post" action="javascript:void(0);" id="request" onsubmit="ajax('request', 'call')">
<fieldset id="calc-top">
<div class="row">
<div class="title">1. Количество колец</div>
<ul>
<li>
<label>Выберите количество колец</label>
<select id="kolvo" name="kolvo">
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
</li>
</ul>
</div>
<div class="row">
<div class="title">2. Тип колец</div>
<ul>
<li><input type="radio" name="type1" value="1" checked /><label>Включить стоимость колец с замками</label></li>
<li><input type="radio" name="type1" value="0" /><label>Включить стоимость колец без замков</label></li>
</ul>
</div>
<div class="row">
<div class="title">3. Крепление швов</div>
<ul>
<li><input type="radio" name="krepej" value="1" checked /><label>Включить стоимость крепления швов</label></li>
<li><input type="radio" name="krepej" value="0" /><label>Не включать стоимость крепления швов</label></li>
</ul>
</div>
<div class="row">
<div class="title">4. Гидроизоляция швов</div>
<ul>
<li><input type="radio" name="hydro" value="1" checked /><label>Включить стоимость гидроизоляции швов</label></li>
<li><input type="radio" name="hydro" value="0" /><label>Не включать стоимость гидроизоляции швов</label></li>
</ul>
</div>
<div class="row">
<div class="title">5. Дополнительные материалы</div>
<ul>
<li><input type="radio" name="type2" value="1" checked /><label>Включить стоимость гравия, песка, цемента и жидкого стекла (рекомендуется)</label></li>
<li><input type="radio" name="type2" value="0" /><label>Не включать стоимость гравия, песка, цемента и жидкого стекла</label></li>
</ul>
</div>
<div class="row">
<div class="title">6. Аксессуар</div>
<ul>
<li><input type="radio" name="type3" value="1" checked /><label>С домиком на колодце</label></li>
<li><input type="radio" name="type3" value="0" /><label>Без домика на колодце</label></li>
</ul>
</div>
<div class="submit">
<input type="button" id="submit" class="calc" value="Рассчитать"/>
</div>
</form>
</fieldset>
<td><td>
<fieldset id="calc-bot">
<h1 class="title">Итого</h1>
<div class="row"><label>Cтоимость колодца</label><input disabled type="text" name="final" id="final" value="" /><input type="hidden" name="final" id="final2" value="" /></div>
<h1 class="title" style="margin-bottom:21px;">Сделать заказ</h1>
<div class="row"><input id="fio" name="fio" placeholder="Имя (обязательно)" type="text" value="" /></div>
<div class="row"><input id="phone" name="phone" placeholder="E-mail (обязательно)" type="text" value="" /></div>
<div class="row"><input id="mail" placeholder="Телефон" name="mail" type="text" value="" /></div>
<div class="row"><textarea name="text" id="text"></textarea></div>
<div class="row"><input type="submit" id="submit" value="Сделать заказ"></div>
</fieldset>
</td></td>
<!-- Конец калькулятора -->
<div class="clr"></div>
</body>
</html>
css файл
html {
background:#f4f5ef;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
font-size:30px;
line-height:24px;
color:#000;
padding-left:60px;
padding-top:10px;
margin-bottom: 15px;
}
.clr {
content:" ";
display:block;
width:150%;
height:1px;
clear:both;
}
#calc-top {
background:#e7e8e3;
border:1px solid #d5d6d2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
padding-top: 34px;
padding-left:59px;
width:365px;
border-left:1px solid #d5d6d2;
border-right:1px solid #e0e1dc;
}
#body a#back{
font-size:14px;
line-height:24px;
color:#4c4c4c;
text-decoration:underline;
position:absolute;
right:14px;
top:12px;
}
#body a#back:hover {
text-decoration:none;
}
#body {
width:100%;
overflow-x: hidden;
margin: 18px auto 0;
background:#cbccc8;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position:relative;
}
#calc-top ul {
margin-top:1px;
padding-left:0px;
margin-bottom: 0px;
}
#calc-top li {
list-style:none;
}
#calc-top .title {
color:#7a2e0e;
font-size:16px;
line-height:24px;
font-weight:bold;
}
#calc-top input[type="radio"] {
font-size:14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height:24px;
margin-left: 15px;
margin-right: 8px;
}
#calc-top label {
font-size:14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height:24px;
}
#calc-top .row {
margin-bottom:0px;
}
#calc-top #submit {
background:#2a7ed5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:#fff;
border:0px;
margin:0px;
padding:0px;
font-size:16px;
text-align:center;
width:176px;
margin-top:14px;
font-weight:bold;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
height:80px;
}
#calc-top #submit:hover {
cursor:pointer;
}
#calc-top .submit {
text-align:right;
}
#calc-top select {
margin-left:15px;
}
#calc-bot {
width:409px;
background:#d8d9d4;
border:1px solid #d5d6d2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:#222222;
padding-top: 21px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
padding-right: 8px;
padding-bottom:10px;
}
#calc-bot .title {
font-size:24px;
line-height:24px;
color:#222222;
padding-left:1px;
margin-bottom:0px;
}
#calc-bot .row {
font-size:24px;
line-height:36px;
color:#222222;
width:100%;
clear:both;
}
#calc-bot .row:after {
clear: both;
content: " ";
display: block;
height: 2px;
width: 100%;
}
#calc-bot .row > * {
display:inline;
}
#calc-bot .row > label {
float:left;
font-size:14px;
line-height:36px;
color:#222222;
width:180px;
display:block;
}
#calc-bot .row > input,
#calc-bot .row > textarea {
font-size:24px;
line-height:36px;
font-weight:bold;
padding:0 10px;
width:411px;
border:1px solid #999999;
font-size:14px;
}
#calc-bot .row > input:focus,
#calc-bot .row > textarea:focus {
border-color:#000;
}
#calc-bot .row > textarea {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
resize:none;
border:1px solid #bcbdbb;
;
height:150px;
margin-top:0px;
margin-bottom:0px;
}
#calc-bot .row > input {
height:40px;
text-align:left;
border:1px solid #bcbdbb;
margin-bottom:13px;
;
}
#calc-bot #final {
background:none;
border:0px;
height:28px;
margin:0px;
padding:0px;
text-align:right;
font-weight:bold;
color:#7a2e0e;
font-size:24px;
text-align:left;
float: left;
width: 200px;
}
#calc-bot #submit {
background:#be0909;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:#fff;
border:0px;
margin:0px 0px 0px 100px;
padding:0px;
font-size:16px;
text-align:center;
width:176px;
margin-top:20px;
font-weight:bold;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
height:31px;
margin-left: 230px;
line-height: 31px;
margin-top: 45px;
}
#calc-bot #submit:hover {
cursor:pointer;
}
#calc-top {
float:center;
}
#calc-bot {
float:center;
}
#calc-top h1,
#calc-bot h1 {
margin-top: 0;
}
Как вы видите в коде, выходит 2 окна с информацией, но они друг под другом. А мне нужно что бы было 2 этих окна рядом с небольшим отступом.
Криво, но объяснил. Кому нужно, могу показать на скринах.
