Проблема с плавающей запятой колонки

Question

Я пытаюсь создать макет из двух столбцов. в левом столбце содержится список ссылок. В правом столбце содержится основное содержание, которое состоит из списка абзацев с изображениями. Для каждого элемента абзац должен быть слева от изображения. Элементы разделены горизонтальными линиями. Моя проблема заключается в том, что независимо от того, где я размещаю явное плавание, что-то перепуталось. Либо элементы абзаца + изображения, либо линии перекрываются друг с другом, или содержимое нужного столбца сбрасывается вниз в соответствии с высотой левого столбца. вот что у меня есть:

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

и 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 

Таким образом, в этом примере, первая горизонтальная линия (один после первого абзаца + изображение) становится толкнул вниз так, что это ниже высота левого столбца. Это означает, что между абзацем + изображением и строкой имеется большое пробел. когда я забираю прозрачные флюиды, материал в правой колонке перекрывается.

Любые идеи о том, как исправить это?

Спасибо.

Answer 1

Необходимо поплавать с помощью tabcontent вправо, поэтому его четкое поведение не обращает внимания на боковую панель. Я добавил это к вашему CSS:

.tabcontent{ float: right; } 

Вы, вероятно, хотите, чтобы явно указать ширину для этого элемента, а если это ваш основной контент область.

ПРИМЕЧАНИЕ. Поскольку оба столбца плавают, вы должны иметь элемент clearfloat в конце .mainContent, если после этого на странице появится что-то.

Answer 2

По моему опыту, это лучше решить, используя display: inline-block вместо плавающих вещей. Либо это, либо кусать пулю и использовать (задыхаясь!) Столы в конце концов.