CSS layout issue

englishpremier

englishpremier

englishpremier

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:
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
 
I haven't actually looked or tested your problem but it sounds like you just need to clear your floats.

The easiest way (imo) is to add the following to your css and then give your container (the one holding the floats) a class of clearfix.

Code: 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}
 
I individually added clear right, clear right and clear both to columns A,B and C respectively.

This worked in that they now appear correct.

Strangely however the ContactContent and the ContacFrom which reside in the Content section almost seem as if they are not part of it. I don't know how to explain it really, but the background to the content section is white #ffffff yet the ContactContent and ContactForm display no background at all. Almost as if the content section is not expanding to accommadate them.
 
You must log in or register to reply here.
Back
Top Bottom