Menu
I am trying to make the section with id="contact_details" appear next to the aside with id="form". It does work for one of my CSS style sheets but not for another. I don't know where I am going wrong... I tried it with and without relative position, with different widths etc.
Your help would be very much 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>
566
asked Jul 27 '26 05:07
It works, just make sure you load the stylesheet correctly and provide a valid html skeleton.
I have changed the float attribute of #contact_details to right, to ensure the #contact-details block appears next to the #form element.
Here are some minor changes to your code. Screenshot: Markups 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>It looks right...
If you put this code in another stylesheet file there is a very good chance the this stylesheet file is being loaded before other stylesheet files and then those that are loaded after have some rules that override the rules in your post. Look into the order of how the stylesheets are loaded. Basically, the last rule will determine how the element will look on the screen.
i.e.
#wrapper {
display: block;
}
#wrapper {
display: none;
}
The #wrapper element will not be displayed because the of the last rule.
Note: There is a way to make the rules above work by using !important, however, that is not recommended practice.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With