Soldato
- Joined
- 15 Feb 2003
- Posts
- 10,167
- Location
- Europe
I'm playing around with some basic web designs to help me better understand html and css.
I have come across a problem i cant seem to solve.
The page in question is layout out as follows:
Navigation
Header
Main content
3 columns horizontally under the main content
Footer
Here is the CSS for the structure:
I've left out the css for nav as its very long and not relevant.
Now the page all works nicely with all the columns in the right place, not overflowing etc..
That is until I try and add a contact form and address side-by-side within the main contact area.
Here is the HTML for what I am adding
Simple enough.
Now here is the CSS that governs the contactinfo and contact form
The problem is that when adding the contact info and contact form, I lose my white background in the main content area and the 3 colums underneath this area float halfway up the page.
Now if I put in a bunch of <p>&nsbp;</p> to space out the content area it is fine, but obviously that isn't the correct way of going about it.
Can anyone help?
Thanks
I have come across a problem i cant seem to solve.
The page in question is layout out as follows:
Navigation
Header
Main content
3 columns horizontally under the main content
Footer
Here is the CSS for the structure:
Code:
/****************header*******************/
#header {
height: 150px;
background: #db6d16
url(../images/headers/about.png);
}
/*******************content*****************/
#content {
line-height: 18px;
background: #ffffff;
}
#content .padding {
padding: 25px;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
/********************columns*****************/
#columna {
float: left;
width: 253px;
font-size: 12px;
color: #ffffff;
line-height: 18px;
background: #67a7d2;
}
#columnb {
float: left;
width: 253px;
font-size: 12px;
color: #ffffff;
line-height: 18px;
background: #c6d347;
}
#columnc {
float: right;
width: 253px;
font-size: 12px;
color: #ffffff;
line-height: 18px;
background: #db6d16;
}
#columna h4 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columna p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columnb h4 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columnb p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columnc h4 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columnc p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#columna .padding {
padding: 25px;
}
#columnb .padding {
padding: 25px;
}
#columnc .padding {
padding: 25px;
}
/**********footer**********************/
#footer {
clear: both;
background: grey;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer a {
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
color: #db6d16;
}
#footer #altnav {
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}I've left out the css for nav as its very long and not relevant.
Now the page all works nicely with all the columns in the right place, not overflowing etc..
That is until I try and add a contact form and address side-by-side within the main contact area.
Here is the HTML for what I am adding
Code:
<div id="content">
<div class="padding">
<div id="contactContent">
<h2>Contact Us</h2>
<ul class="addressList">
<li><strong>Registered Address:</strong></li>
<li>RH Heating</li>
<li>123 Street Road</li>
<li>Town</li>
<li>County</li>
<li>IP7 8SQ</li>
<li><br /><strong>Tel:</strong> 01603 XXXXXX</li>
<li><br />Registered in England and Wales No. 0000000</li>
</ul>
</div>
<div id="contactForm">
<form method="post" action="" id="enquiryform" name="enquiryform" onsubmit="return validateform();" />
<input type="hidden" name="#email" value="[email protected]" />
<input type="hidden" name="#redirect" value="#" />
<input type="hidden" name="#recipient" value="[email protected]" />
<input type="hidden" name="#wrapper" value="on" />
<input type="hidden" name="#sender" value="{companyname}" />
<input type="hidden" name="#sendersystem" value="[email protected]" />
<input type="hidden" name="#subject" value="RH Heating Equiry form" />
<input type="hidden" name="#reference" value="RH Heating-Enquiry" />
<input type="hidden" name="#company" value="RH Heating" />
<input type="hidden" name="#internet" value="#" />
<br />
<table align="left">
<tr>
<td valign="top" align="left"><label id="lbl_contactname">Contact name*</label></td>
<td><input name="contactname" id="contactname" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_address">Address</label></td>
<td><input name="contactaddress" id="contactaddress" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_contacttowncity">Town/City</label></td>
<td><input name="contacttowncity" id="contacttowncity" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_contactpostcode">Postcode</label></td>
<td><input name="contactpostcode" id="contactpostcode" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_contactemail">Email*</label></td>
<td><input name="contactemail" id="contactemail" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_contacttelephone">Telephone No.</label></td>
<td><input name="contacttelephone" id="contacttelephone" class="inputFields" type="text" maxlength="100" onblur="validateField()" /></td>
</tr>
<tr>
<td valign="top" align="left"><label id="lbl_enquiry">Enquiry*</label></td>
<td><textarea name="enquiry" id="enquiry" class="inputFields" rows="5" cols="0" onblur="validateField()" ></textarea></td>
</tr>
<tr>
<td align="right" colspan="2"><input type="submit" id="#submit" name="#submit" class="submitButton" value="Send Enquiry" /></td>
</tr>
</table>
</div>
</div>
</div>Simple enough.
Now here is the CSS that governs the contactinfo and contact form
Code:
#contactContent {
width: 200px;
padding: 10px 20px 0px 20px;
border: 0px solid red;
float: left;
}
.addressList {
list-style-type: none;
padding: 0;
margin: 0;
}
#contactForm {
float: right;
margin: 10px 10px 0px 0px;
padding: 0;
border: 0px solid green;
text-align: center;
width: 350px;
}
.inputFields {
margin-bottom: 8px;
width: 200px;
font-family: tahoma, verdana, arial, sans-serif;
}The problem is that when adding the contact info and contact form, I lose my white background in the main content area and the 3 colums underneath this area float halfway up the page.
Now if I put in a bunch of <p>&nsbp;</p> to space out the content area it is fine, but obviously that isn't the correct way of going about it.
Can anyone help?
Thanks