Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Border on container not covering entire container 1

Status
Not open for further replies.

nofx1728

Technical User
Jan 26, 2006
65
US
I have no clue what the problem is. I have a border on the container which holds everything on this very very simple page. In explorer it appears correctly, but in firefox, opera, and netscape it puts the bottom of the border after the description, instead of after the address and contact information. Anyone see what is wrong with the code?

html code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clear Channel Sample</title>
<link href="ccpage.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="container">
		<div id="logo">
			<div align="center"><img src="logo.gif" width="400" height="122" alt="Logo of Company" /></div>
		</div>
		<div id="name">
			<h1>Company Name</h1>
		</div>
		<div id="description">
			<p>This is a short description of our company. We are a full service advertising agency located in Port Saint Lucie. We can add as much information as needed to fully describe our company in this section. If you need additional information please contact us from the information below. We can also list products in this section if it applies.</p></div>
		<div id="address">
			<h2>Address:</h2>
			<p>1595 SE Port Saint Lucie Blvd.</p>
			<p>Port Saint Lucie, Florida  34952</p>
			<p><a href="[URL unfurl="true"]http://www.mapquest.com/maps/map.adp?address=1595%20Se%20Port%20St%20Lucie%20Blvd&city=Port%20Saint%20Lucie&state=FL&zipcode=34952%2d5431&country=US&title=%3cb%3e1595%20Se%20Port%20St%20Lucie%20Blvd%3c%2fb%3e%3cbr%20%2f%3e%20Port%20Saint%20Lucie%2c%20FL%2034952%2d5431%2c%20%20US&cid=lfmaplink2&name=">view[/URL] map</a></p>
		</div>
		<div id="contact">
				<h2>Contact:</h2>
				<p>772-337-0049</p>
				<p>772-337-3485</p>
				<p><a href="mailto:dlfmedia@bellsouth.net">dlfmedia@bellsouth.net</a></p>
		</div>
	</div>
</body>
</html>

CSS code
Code:
/* CSS Document */

body {
margin: 0px;
padding: 0px;
}

/*layout*/

#container {
background-color: #ffffff;
border: #000000 solid 1px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
width: 700px;
}

#logo {
text-align:center;
margin-top: 5px;
}

#name {
text-align: center;
color: #FF0000;
}

#address {
font-size: 14px;
text-align: left;
width: 350px;
float:left;
}

#contact {
width: 350px;
float: left;
font-size: 14px;
text-align: right;
}


#description{
text-align:left;
font-size: 12px;
margin: 5px 5px 10px 5px;
}

h1 {
font-size:26px;
font-weight: 800;
}


p {
margin:0px 5px;
}

h2 {
font-size: 16px;
font-weight: 800;
margin: 5px;
color:#FF0000;
}

Sorry, I don't have it up on a test site.

Thanks,

nofx1728
 
This is easy. Elements that are floated do not extend their parent container and can actually hang over it. That is what is happening in your scenario. IE however is trying to be helpful and incorrectly extends the parent element. If you really want to extend the parent element, you need to put a non-floated element at the bottom of it -- usually just a dummy div with [tt]clear: both;[/tt] will do best.
 
Worked perfect. Thank you very much.

nofx1728
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top