Column div float issue

Question

I'm trying to create a two column layout. the left column contains a list of links. The right column contains the main content, which consists of a list of paragraphs with images. For each item, the paragraph should be to the left of the image. Items are separated by horizontal lines. My issue is that no matter where I put a clear float, something gets messed up. Either the paragraph+image items and lines are overlapping each other, or the right column content gets pushed down according to the height of the left column. here's what I have:

<div id="container">

  <div id="header">
        ...
  </div>
  <div id="subheader">
   ...
  </div>
  <div id="sidebar1">
    (list of links here)
  </div>
  <div id="mainContent">
    <div class="tabcontent hide" id="cont-3-1-1"> 
         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

     etc..........

   </div>
   <br class="clearfloat" />
   <div id="footer">
      ...
   </div>
</div>

and the CSS:

.purpleLayout #container { 
 width: 50em; 
 background: #FFFFFF;
 margin: 0 auto;
 border: 0px solid #635e7b;
 text-align: left;
 z-index:0;
 position:relative;
} 

.purpleLayout #sidebar1 {
 float: left; 
 width: 11em;
 background: #c9c5db;
 padding: 1em 0; 
 color:#666666;
}

#sidebar1 .sidetext{
 padding: .4em 1em .2em 1em;
 height:auto;
 width:auto;
}

#sidebar1 .sidelink{
 height:auto;
 width:auto;
 cursor:pointer;
}


.purpleLayout #mainContent {
 margin: 0 1.5em 0 12em;
} 

#mainContent img{
 border: .2em solid #635e7b;
 max-width: 14em;
}

.tabcontent{padding:15px 0;}


.fltrt { 
 float: right;
 margin-left: 8px;
}
.fltlft {
 float: left;
 margin-right: 8px;
 width:21em;
}
.clearfloat {
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.title{font-size:1.05em; font-weight:bold;}

.subtitle{color:#5f5f5f; font-size:.95em;}

.text{margin-left:1em; font-size:.85em;}

.line{margin-left:.1em; width:36em; border-bottom:1px solid #635e7b

So in this example, the first horizontal line (the one after the first paragraph+image) is getting pushed down so it's below the height of the left column. This means that there is a large white space between the paragraph+image and the line. when I take away the clearfloats, stuff in the right column overlaps.

Any ideas on how to fix this?

Thanks.

Answer 1

In my experience, this is better solved using display: inline-block instead of floating things. Either that, or bite the bullet and use (gasp!) tables after all.

Answer 2

Need to float the tabcontent right, so its clear behaviors are not paying attention to the sidebar. I added this to your CSS:

.tabcontent{ float: right; }

You will probably want to specify an explicit width for this item as well if it's your main content area.

NOTE: Since both columns are floated you would want to have a clearfloat item at the end of .mainContent if any thing is coming after this on the page.