CSS help with sidebar height

[mlegg]

I'm having an issue with this site http://samonasgroup.com/ I have another featured property I want to put below the featured one on the right in the right sidebar but when I do I get this see large image I got that when I tried to change the page add another property. If you look at the site now I set it back to just one featured property so the page looks correct.

What do I need to change in my CSS file? Do I need background-repeat : repeat-y; in another of the lines? I tried to change the DIV contentbox to a table

<table class="contentBox"><tr><td>

but that made that part a little narrower than the banner at the top and also left a tiny space which didn't look right.
thanks and if you need more info please ask

body {
  margin: auto;
  color : #061c37;
  background-color: #1B1464;
  background-repeat : repeat;
  max-width : 870px;
}
#navBar
{
  color: #CEEAEE;
  font-family: sans-serif;
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0;
}
#navBar li
{
  display: inline;
  list-style-type: none;
}
#navBar li a
{
  display: inline-block;
  height: 1.5em;
  color: #CDE2FC;
  padding-top: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  text-decoration: none;
}
#navBar li a:hover {
  color: #0C61C9;
  background-color: white;
}
#mainPicture {
  height : 244px;
  width : 870px;
  background-color : #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}
.contentBox {
  font-family: sans-serif;
}
.sidebar {
  float: right; 
  width:370px;
  padding: 10px;
}
.innerBox {
  background-color : #ffffff;
  background-image : url(images/content_back.png);
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}
.agent-block img {
	border: 1px solid #E5E5E5;
	padding: 4px;
	margin: 0 8px 1px 0;
}
.slideshow {
	font-family:Arial, Helvetica, sans-serif;
	width:336px;
	height:375px;
	overflow:hidden;
	background-color:#000000;
	color:#FFFFFF;
	border:5px solid #99CC00;
}
.slideshow > ul {
	margin: 0;
	padding: 0;
}
.slideshow > ul > li {
	display:inline;
	margin:0px;
	padding:0px;
	font-size:1px;
	margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
	border:2px solid #FFFFFF;
	width:332px;
}
.slideshow  > ul > li > img {
	border:2px solid #FFFFFF;
	margin:0px;
	padding:0px;
	width:80px;
	height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
	display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
	border-color:#FF6600;
}
.ldpPFHeadline 
h3{font:10pt; font-weight:bold;}.ldpPropFeatures td{vertical-align:top;margin:0;padding:0 0 10px 0;width:200px;}.ldpPropFeatures ul{margin:0 0 0 15px;padding:0;}.ldpPropFeatures li{margin:0;padding:0;list-style-position:outside;}.ldpSecHeadline{margin:0 0 5px 0;}
#footer {
  background : url(images/footer.png) no-repeat;
  text-align : center;
  font-size : small;
  font-family : sans-serif;
  color : #010101;
  padding-top: 5px;
  padding-bottom: 5px;
}
#footer A {
  color : #010101;
}

[X96 Web Design]

Right before the end of contentBox, put this:

<div style="clear:both;"> </div>

That should fix it...

Hope that helps!
// X96 \\

[mlegg]

Thank you. I'm a CSS noob and it was driving me crazy. Now would it be easier for me to add clear:both; into my css code for .contentbox and .sidebar?

body {
  margin: auto;
  color : #061c37;
  background-color: #1B1464;
  background-repeat : repeat;
  max-width : 870px;
}
#navBar
{
  color: #CEEAEE;
  font-family: sans-serif;
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0;
}
#navBar li
{
  display: inline;
  list-style-type: none;
}
#navBar li a
{
  display: inline-block;
  height: 1.5em;
  color: #CDE2FC;
  padding-top: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  text-decoration: none;
}
#navBar li a:hover {
  color: #0C61C9;
  background-color: white;
}
#mainPicture {
  height : 244px;
  width : 870px;
  background-color : #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}
.contentBox {
  font-family: sans-serif;
}
.sidebar {
  float: right; 
  width:370px;
  padding: 10px;
}
.innerBox {
  background-color : #ffffff;
  background-image : url(images/content_back.png);
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}
.agent-block img {
	border: 1px solid #E5E5E5;
	padding: 4px;
	margin: 0 8px 1px 0;
}
.slideshow {
	font-family:Arial, Helvetica, sans-serif;
	width:336px;
	height:375px;
	overflow:hidden;
	background-color:#000000;
	color:#FFFFFF;
	border:5px solid #99CC00;
}
.slideshow > ul {
	margin: 0;
	padding: 0;
}
.slideshow > ul > li {
	display:inline;
	margin:0px;
	padding:0px;
	font-size:1px;
	margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
	border:2px solid #FFFFFF;
	width:332px;
}
.slideshow  > ul > li > img {
	border:2px solid #FFFFFF;
	margin:0px;
	padding:0px;
	width:80px;
	height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
	display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
	border-color:#FF6600;
}
.ldpPFHeadline 
h3{font:10pt; font-weight:bold;}.ldpPropFeatures td{vertical-align:top;margin:0;padding:0 0 10px 0;width:200px;}.ldpPropFeatures ul{margin:0 0 0 15px;padding:0;}.ldpPropFeatures li{margin:0;padding:0;list-style-position:outside;}.ldpSecHeadline{margin:0 0 5px 0;}
#footer {
  background : url(images/footer.png) no-repeat;
  text-align : center;
  font-size : small;
  font-family : sans-serif;
  color : #010101;
  padding-top: 5px;
  padding-bottom: 5px;
}
#footer A {
  color : #010101;
}

[mlegg]

Is it OK to bump this? I still need an answer for the above post about putting the code in the CSS file.

thank you