0

I am creating a small directory with a few details. For some reason the CSS will not make the border arround the whole thing. Please could you look at it and let me know. I have tried everything. I have attached the all the code I am using. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#tradeCompanyContainer {
	width: 635px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.tradeComDetails {
	float: left;
	width: 460px;
	padding-left: 15px;
}
.comName {
	font-family: Arial;
	font-size: 18px;
	color: #0000CC;
	padding-bottom: 2px;
}
.conDesc {
	width: 450px;
}
.comEmail {
	color: #0000CC;
	width: 450px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	font-size: 14px;
}
.comDetail {
	width: 450px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.tradeComBox {
	padding: 5px;
	width: 621px;
	border: 1px solid #CCCCCC;
	height: auto;
}
.tradeComLogoContainer {
	float: left;
	width: 140px;
}
.tradeLogo {
	width: 140px;
}
#company-style
{
	font-family: Arial;
	font-size: 12px;
	margin: 0px;
	width: 435px;
	text-align: left;
	border-collapse: collapse;
}

#company-style td
{
	border-bottom: 1px solid #fff;
	color: #000000;
	border-top: 1px solid #fff;
	background-color: #FFFFFF;
	background-image: none;
	padding-top: 5px;
	padding-right: 12px;
	padding-bottom: 5px;
}
span.comDetails {
	color:#0000CC;
	font-weight:normal;
	font-size: 12px;
}


</style>
</head>

<body>
<div id="tradeContainer">
            <div id="tradeBanner"></div>
            <div class="tradeSubHeading">Global Manufactureres and Suppliers</div>
            
            <div id="tradeCompanyContainer">
              <div class="tradeComBox">
                <div class="tradeComLogoContainer">
                  <div class="tradeLogo"><img src="../images/abbiatti.jpg" alt="Abbiatti" width="140"/></div>
                </div>
                <div class="tradeComDetails">
                  <div class="comName">Abbiati</div>
                  <div class="conDesc">
                  <p>We would be very pleased to have you as our guests in order to offer you the opportunity to follow in which way from the raw material, through a series of workings, we can obtain the finished product. In our design office you will have the change to submit some new ideas which will be converted into the final article.</p>
                  </div>
                  <div class="comEmail">Email this company. &nbsp;<a href="mailto:arpadbus@gmail.com"><img src="../images/letterIcon.jpg" border="0"/></a></div>
                  <div class="comDetail">
                  <table id="company-style" summary="Company Details">
                      <tr><td>Sales Contact</td><td><span class="comDetails">Ian Milner</span></td></tr>
                      <tr><td>Tel Number</td><td><span class="comDetails">+44 (0) 123 5456 8745</span></td></tr>
                      <tr><td>Website</td><td><a href="http://www.google.com"><span class="comDetails">www.website.com</span></a></td></tr>
                      <tr><td>Address</td><td><span class="comDetails">Alice Building, 120 High Street, Cambridge, CB32 4ER, UK</span></td></tr>
                  </table>
                  </div>
                </div>
              </div>
            </div>
            
          </div>

</body>
</html>
5
Contributors
7
Replies
9
Views
7 Years
Discussion Span
Last Post by ushajase
0

What does that mean a border around everything????
Please be specific.. which DIV??

DO you mean this > tradeContainer ??
it has no CSS definition..

0

I understand, if you put <br style="clear:both;" /> just before the tradeComBox </div> this will solve the problem

0

Thank you for your input. This has solved the problem in all browsers. Much appreciated

0

If you have a div with a border or background with no fixed height that has floated divs within it, the div doesn't always fully surround the containing divs. If you put a clearing element before the end of the containing div it forces it to surround the contained floated divs. The clearing element can be a div, <div style="clear:both;"></div> or a break <br style="clear:both;"/> or if you don't want inline styles you can have a class in your stylesheet eg. .clearfix
If your surrounding div has a fixed width you can try applying a float to the div which can work just as well. Personally I have found <br style="clear:both;"/> to be the best solution, it works in all browsers and it validates.
I hope I have explained this ok

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.