border issue not completing 100%

[branmh]

I'm new at CSS and need some help..

For some reason my border-left in the contentarea id is only show to the min-height and doesn't carry when this is more content listed in the contentarea.

Is there something wrong with the coding or what's is going on with it?



CSS Code:

/* container to center the layout */
#container {
width: 990px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
background-color: #f6eaee; 
}
/* navigation sidebar */
#navigation {
float:left;
width : 150px; 
padding : 2px; 
margin : 0px;
background-color: #f6eaee;
}
/* content */
#contentarea { 
padding: 2px;
margin-left: 154Px;
margin-right: 0px;
background-color: #f6eaee;
border-left: 1px solid #aa6f83;
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}
/* column and box builder */
.ca-col {
float: left;
} 

.box {
 background-color: #ffffff;
padding : 2px;
border : 1px solid #f4a3a2;
margin: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: black;
font-size: 10px;
text-align: left;
} 

.box H1 {
 /*text-transform:uppercase;*/
 text-indent: 1px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-weight: bold; 
color: white; 
font-size: 10px; 
background-color: #7d5b6b; 
vertical-align: middle; 
 margin: 0px;
padding-top: 5px; 
padding-bottom: 5px; 
padding-right: 5px; 
padding-left: 5px;
}

HTML Coding:

<div id="container"> 
<div id="navigation">
<div class="ca-col">
<div class="box" style="height: 100px; width: 140px;">
 <h1>header</h1> 
 content placeholder
 </div>
</div>
</div>

<div id="contentarea">
<div class="ca-col">
<div class="box" style="min-height: 100px; width: 300px;">
  <h1>header</h1> 
  content placeholder   col 1 row 1
  </div>
<div class="box" style="min-height: 100px; width: 300px;">
  <h1>header</h1> 
 content placeholder   col 1 row 2
  </div>
<div class="box" style="min-height: 100px; width: 300px;">
  <h1>header</h1> 
  content placeholder   col 1 row 3
  </div>
<div class="box" style="min-height: 500px; width: 300px;">
  <h1>header</h1> 
  content placeholder   col 1 row 4
  </div>
</div>
<div class="ca-col">
<div class="box" style="min-height: 824px; width: 150px;">
 <h1>header</h1> 
 content placeholder   col2 row1
 </div>
 </div>
<div class="ca-col">
<div class="box" style="min-height: 824px; width: 350px;">
  <h1>header</h1> 
  content placeholder col3 row1
  </div>
 </div>
</div>
 <!-- end of content area -->
</div>

Thanks
Brandon Holland
weathertrackcast.com

[enigma1]

add the overflow property to the container

#contentarea {
padding: 2px;
margin-left: 154Px;
margin-right: 0px;
background-color: #f6eaee;
border-left: 1px solid #aa6f83;
min-height:600px;
overflow: hidden;
.....

[branmh]

thanks, that works.

Can you explain why that fixed the issue?

[enigma1]

Children of the #contentarea use the float property. And because of it, without a hidden overflow these parent properties will not follow the children. Try it on its own.

<div style="margin: 20px; border: 1px solid #000; background: #F00; overflow: hidden;">
<div style="float: left;">line-1<br />line-2<br />line-3<br />line-4<br /></div>
</div>

An alternative way will be to deploy the clear property right before the parent container closes. In your sample code it has the same effect. Somehow the parent container needs to know how much its children are extend to. So clipping or clearing will do.

</div>
<div style="clear:both"></div>
</div>
<!-- end of content area -->

These are the 2 most common methods. There are many other ways though.

In general when you have CSS problems take out the basic structure of the containers where you see the problem and try it on its own. It is much simpler.