Css 列div浮动问题

我正在尝试创建一个两列布局。左列包含链接列表。右侧列包含主要内容，其中包含一个带有图像的段落列表。对于每个项目，段落应位于图像的左侧。项目由水平线分隔。我的问题是，无论我把一个明确的浮动，有些事情会搞砸。段落+图像项和行相互重叠，或者右栏内容根据左栏的高度向下推。以下是我所拥有的：

<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>

因此，在本例中，第一条水平线，即第一段+图像后的水平线被向下推，因此它低于左栏的高度。这意味着段落+图像和行之间存在较大的空白。当我去掉ClearFloat时，右列中的内容重叠

有没有办法解决这个问题

---

谢谢。

根据我的经验，使用display:inline块而不是浮动块可以更好地解决这个问题。要么这样，要么咬紧牙关，喘口气！毕竟，表。

需要将tabcontent向右浮动，因此它的明确行为没有注意侧边栏。我将此添加到您的CSS中：

.tabcontent{ float: right; }

如果该项目是您的主要内容区域，您可能还需要为此项目指定一个显式宽度

注意：由于这两列都是浮动的，因此如果页面上有任何内容在.mainContent后面，您可能希望在.mainContent的末尾有一个clearfloat项

.tabcontent{ float: right; }