Я изучаю css и хочу создать две колонки, без каких-либо табличных тегов и т.д. Это то, что у меня есть (код из CSS Cookbook 3ed edition).
Код HTML:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
Код CSS:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Потому что вы плаваете один div, а не другой.
С помощью нескольких простых изменений CSS он будет работать (если h4
не охватывает несколько строк):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
Смотрите обновленную скрипку.
Другим вариантом является удаление полей из h4
(хотя, как сказано в других ответах, плавающие [или подобные] обе колонки имеют больше смысла).
h4 {margin: 0;}
Вы должны плавать все div в вашем контейнере
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}
Вот как я отлаживал (кроме того, что использовал Firebug или другой Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
Как заявил @Arjan в своем ответе, это связано с плавающей и ее последствиями.
Раскомментируйте последнее объявление CSS для решения, которое не будет изменять макет. Также добавьте margin-top
для обоих столбцов или padding-top
если вы хотите вернуть вертикальный запас...