bottom border of div bleeds across page

despite having a CSS colum of content beside it!

[RedTCat]

I have a two colum layout - simplified HTML and CSS shown below.
(Navigation and footer DIV's not shown, they do not affect the issue)
On the left (lhs_content) column there are four (only two shown here for bevity) DIV's with borders. The right (rhs_sidebar) column has four or five images (two shown for clarity). In IE6 (randomly) the bottom borders of some or all of the DIV's bleed all the way across the page, but not the content or background. Due to compatibility issues with 100's of other historic pages on the site the DTD is not specified, so is rendering in quirks mode.

CSS:

#lhs_content { position: relative;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 9px;
padding-left: 0px;
margin-right: 230px;
border-right: 1px solid #0033cc }

#rhs_sidebar { position: relative;
width: 210px;
padding-top: 10px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
margin-left: 10px;
float: right }

.banner { width: 210px;
padding-top: 0px;
padding-bottom: 10px }

#newlatest { width: 552px;
border: 1px solid #CC0033;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #FFEEEE }

#newhome (identical to #newlatest, just different colours)

HTML:

<div id="rhs_sidebar">

<div class="banner"><a href="file1.html">
<img src="banner1.jpg"
alt="banner 1 text" width="210" height="70"></a></div>

<div class="banner"><a href="file2.html">
<img src="banner2.jpg"
alt="banner 2 text" width="210" height="70"></a></div>

</div>

<div id="lhs_content">

<div id="newlatest">
<h2>Latest News</h2>
<ul>
<li><a href="news1.html">News 1 Headline</a></li>
<li><a href="news2.html">News 2 Headling</a></li>
</ul>
<p><a href="latest.html">More Latest News...</a></p>
</div>

<div id="newhome">
<h2>Home News</h2>
<ul>
<li><a href="home1.html">Home 1 Headline</a></li>
<li><a href="home2.html">Home 2 Headling</a></li>
</ul>
<p><a href="latest.html">More Home Items...</a></p>
</div>

</div>

[Marshall]

Just a quick look makes me thinks it is because you do not have a set width for #lhs_content, unless I am missing something else.

Just a side note, you can shortcut your margin and padding designations:

padding: 0 0 3px 4px; /* top, right, bottom, left */
margin: 0 4px 5px 0;

I just picked these numbers out of the air.

Marshall

[RedTCat]

Thanks Marshall, that is bizarre! I had a very similar layout before and no problem at all with bleeding borders! I deliberately didn't specify a width for LHS, 'cos it had a margin to stop it overlapping the RHS - and there can be issues with mis-rendering pixel-perfect layouts.
I usually do shortcut the margins, padding, etc, but when still in development I keep them seperate so I can find them more easily!