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 (http://i40.tinypic.com/15cc8p1.png) 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