Отзывчивая макета с проблемами CSS на Clearfix

Question

Я создаю свой первый реальный отзывчивый макет и испытываю трудности с css & clearfix. Я сделал скрипт JS (http://jsfiddle.net/brandrally/GFXP9/1/), демонстрирующий проблему с созданным мной кодом.

В принципе, я просто хочу, чтобы линии «1» и «линия 2» находились на месте друг под другом без пробела. Я планирую разместить довольно много div внутри .line div, поэтому я считаю, что мне нужно очистить их.

CSS

div#content {max-width: 400px; min-width: 300px; margin:0 auto; } 
div#left {width: 100px; background:#CCC; float: left; } 
.line {border-bottom: 1px solid #000;} 
div#right {background:#F63; margin-left: 100px;} 

/* Clearfix */ 
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
.CF { display:inline-block; } 
/* IE mac \*/ 
.CF { display:block; } 

HTML

<div id="content" class="CF"> 

<div id="left" class="CF"> 
    Left Content <br/> 
    Displayed<br/> 
    Demo<br/> 
    Problem. 
</div> 

<div id="right" class="CF"> 
    <div class="CF line"> Line 1</div> 
    <div class="CF line"> Line 2</div> 
    <div class="CF line"> Line 3</div> 
</div> 

</div> 

Answer 1

, если вы хотите, чтобы избежать очистки .CF с: после того, как от #left вам нужно добавить overflow:hidden; к .CF.

.CF не требуется псевдоним clearfix, поскольку overflow выполнит эту работу.

http://jsfiddle.net/GFXP9/5/