Member Avatar for abrocketman

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
  • 287 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ushajase
Member Avatar for sagive

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

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

Member Avatar for Louilly

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

Member Avatar for abrocketman

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

Member Avatar for matricol

can you tell us how ?

Member Avatar for matricol

I have the same kind problem and I avoid dealing with it

Member Avatar for Louilly

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

Member Avatar for ushajase

you have to put <div style="clear:both"></div> after the tradeComDetails div..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.