How to fix this float issue ? next to Hobbies label ?
Here’s my code :
<!doctype html>
<html>
<head>
<title>Enter Your Data</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="mainContainer">
<header>
<h1>Enter your data :</h1>
</header>
<form name="contactForm" id="contactForm">
<div id="textInfo">
<ul>
<li>
<label for="firstName">First Name : </label>
<input type="text" name="firstName" id="firstName"></input><br>
</li>
<li>
<label for="lastName">Last Name : </label>
<input type="text" name="lastName" id="lastName"></input><br>
</li>
<li>
<label for="email">E-mail : </label>
<input type="email" name="email" id="email"></input><br>
</li>
</ul>
</div>
<!-- Occupation radio buttons -->
<div id="occupationInfo">
<label>Occupation : </label>
<ul>
<li>
<input type="radio" name="occupation" value="student" id="student">
<label for="student">Student</label>
</input>
</li>
<li>
<input type="radio" name="occupation" value="professor" id="professor">
<label for="professor">Professor</label>
</input>
</li>
<li>
<input type="radio" name="occupation" value="programmer" id="programmer">
<label for="programmer">Programmer</label>
</input>
</li>
</ul>
</div>
<!-- End of radio buttons -->
<!-- Hobbies checkboxes -->
<div id="hobbyInfo">
<label>Hobbies : </label>
<ul>
<li>
<input type="checkbox" name="hobby" value="computer" id="computer">
<label for="computer">Computer</label>
</input>
</li>
<li>
<input type="checkbox" name="hobby" value="biking" id="biking">
<label for="biking">Biking</label>
</input>
</li>
<li>
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">Reading</label>
</input>
</li>
</ul>
</div>
<!-- End of hobbies section -->
<!-- Birthday section -->
<div id="birthdayInfo">
<label>Enter your birhday date : </label>
<select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year">
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
<!-- End of birthday section -->
<div id="briefInfo">
<label for="brief">A little bit about you : </label>
<textarea id="brief"></textarea>
</div>
<input type="submit" value="Submit"/>
</form>
</div
</body>
</html>
style.css :
* {
padding : 0 ;
margin : 0;
font-size : 17px;
}
body {
width : 100%;
height : 100%;
background-color: #005F6B;
}
ul {
display :inline;
}
li {
list-style : none;
height : 30px;
}
#mainContainer {
width : 800px;
margin : auto;
box-shadow : 1px 1px 3px 0 #343838;
border-radius : 0px 10px;
background-color : #008C9E;
}
#mainContainer header {
color : #343838;
}
#mainContainer header h1 {
font-size : 30px;
padding: 15px;
text-shadow : 1px 1px #005F6B ;
}
#contactForm div {
width : 50%;
margin : 5px;
background-color : orange;
}
#textInfo li {
padding: 3px;
}
#textInfo label {
float :left;
}
#textInfo input {
float:right;
height : 20px;
width : 60%;
}
#occupationInfo li {
float : right;
}
#hobbyInfo li{
float : right;
}
Add a
clear:bothto your hobbyInfo div. Ex: http://jsfiddle.net/dLjge/ (I added it via style=”…” on the div).