Why is my "float: left"; not work?
I'm trying to make a section with id = "contact_details" next to the word id = "form". It works for one of my CSS stylesheets, but not the other. I don't know where I'm going wrong ... I've tried this with and without relative position, with different widths, etc.
Your help would be greatly appreciated! Cheers, Marie
#wrapper {
width: 989px;
margin: 0 auto 0;
position: relative;
background-color: gray;
}
#contact_details {
float: left;
position: relative;
width: 350px;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
background-color: blue;
}
#form {
float: left;
position: relative;
width: 450px;
padding-top: 30px;
padding-right: 30px;
background-color: red;
}
#form_table {
padding-left: 0px;
padding-right: 0px;
}
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<section id="contact_details">
<h1>Contact Details</h1>
<br>
<h3>Physical Address</h3>
<p><em>There and Back Travel</em></p>
<p>Travel House Level 1</p>
<p>Travel Line North</p>
<p>Waikanae</p>
<p>New Zealand</p>
</section>
<aside id="form">
<h1></h1>
<form name="user_details">
<table id="form_table">
<tr>
<td class="form_cell"><label for="first_name">First Name:</label></td>
<td class="form_cell"><input type="text" name="first_name"></td>
</tr>
<tr>
<td class="form_cell"><label for="surname">Surname:</label></td>
<td class="form_cell"><input type="text" name="surname"></td>
</tr>
<tr>
<td>Preferred tour types:</td>
<td>
<input type="checkbox" name="adventure">Adventure<br>
<input type="checkbox" name="beach">Beach<br>
<input type="checkbox" name="leisure">Leisure<br>
</td>
</tr>
</table>
<input type="submit"><input type=reset>
</form>
</aside>
<footer></footer>
</div>
</body>
source to share
This works, just make sure you load your stylesheet correctly and provide a valid html skeleton.
I changed the float attribute #contact_details
to right
to ensure that the block #contact-details
appears next to the element #form
.
Here are some minor changes to your code. Screenshot of the markup result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrapper {
width: 989px;
margin: 0 auto 0;
position: relative;
background-color: gray;
}
#contact_details {
float: right;
position: relative;
width: 350px;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
background-color: blue;
}
#form {
float: left;
position: relative;
width: 450px;
padding-top: 30px;
padding-right: 30px;
background-color: red;
}
#form_table {
padding-left: 0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<section id="contact_details">
<h1>Contact Details</h1>
<br>
<h3>Physical Address</h3>
<p><em>There and Back Travel</em></p>
<p>Travel House Level 1</p>
<p>Travel Line North</p>
<p>Waikanae</p>
<p>New Zealand</p>
</section>
<aside id="form">
<h1></h1>
<form name="user_details">
<table id="form_table">
<tr>
<td class="form_cell"><label for="first_name">First Name:</label></td>
<td class="form_cell"><input type="text" name="first_name"></td>
</tr>
<tr>
<td class="form_cell"><label for="surname">Surname:</label></td>
<td class="form_cell"><input type="text" name="surname"></td>
</tr>
<tr>
<td>Preferred tour types:</td>
<td>
<input type="checkbox" name="adventure">Adventure<br>
<input type="checkbox" name="beach">Beach<br>
<input type="checkbox" name="leisure">Leisure<br>
</td>
</tr>
</table>
<input type="submit"><input type=reset>
</form>
</aside>
<footer></footer>
</div>
</body>
</html>
source to share
It looks right ...
If you put this code in another stylesheet file, there is a very good chance that this stylesheet file is loaded before the other stylesheet files, and then the ones that are loaded after some rules override the rules in your post. See how the stylesheets are loaded. Basically, the last rule will dictate how the element will appear on the screen.
i.e.
#wrapper {
display: block;
}
#wrapper {
display: none;
}
The item #wrapper
will not be displayed due to the last rule. Note. There is a way to make the above rules using !important
, however this is not recommended.
source to share