Ребенок не принимает родительскую высоту div

Question

У меня есть div с двумя плавающими элементами внутри него. Я хочу, чтобы у элементов была линия между ними с границей 1px. Содержимое одного из div является постоянным по высоте и другой переменной по высоте. Это первая строка (число 10, 20, 30 и т. Д.), А второй div может содержать одну, две, три строки (текст, проходящий по линиям).

Я играл с этим для возраст и не может заставить его работать

.tablecol1{ 
    display:inline; 
    width:17%; 
    float:left;*/ 
    max-width: 40px; 
    font-size:14pt; 
    word-wrap: break-word 
    background-color:#ffffff; 
    padding-left:1%; 
    } 
.tablecol2{ 
    display:inline; 

    width:80%; 
    float:left; 
    font-size:11pt; 
    word-wrap: break-word; 
    border-left:1px solid #000000; 
      padding-left:1%; 
    } 
.rowHolder{ 
    overflow:hidden; 
/* width:100%;*/ 
    border-top:solid 1px #000000; 
    font-size:11pt; 
    word-wrap: break-word; 
    background-color:#fccfff; 
    position:relative; 
} 
.cleaner { 
    clear:both; 
    height:1px; 
    font-size:1px; 
    border:none; 
    margin:0; padding:0; 
    background:transparent; 
} 

дивы являются

<div class="rowHolder"> 
    <div class="tablecol1"> 
     <span class="bigtime">09</span> <span class="smalltime">00</span> 
    </div> 
    <div class="tablecol2"></div> 
    <div class="cleaner"></div> 
</div> 
<div class="rowHolder"> 
    <div class="tablecol1"> 
     <span class="bigtime">10</span> <span class="smalltime">00</span> 
    </div> 
    <div class="tablecol2"> 
     <div class="appointment" style="background-color:#fab88e"> 
      10:03 | Sight test | Alan Orr | BB could be the code or comment added 
     </div> 
     <div class="appointment" style="background-color:#fab88e"> 
      10:30 | Walk in | John Smith | NP or something about reported sore red eye 
     </div> 
    </div> 
    <div class="cleaner"></div> 
</div> 

Answer 1

Это будет решить вашу проблему:.

.tablecol2{ 
    min-height: 21px; 
    ... 

Поскольку .tablecol2 равно float: left, он не может наследовать высоту родительского div.
Этот код задает минимальную высоту, поэтому линия разделителя будет всегда отображаться.

Вот пример:
http://jsfiddle.net/vRAPd/

Answer 2

Это не даст Роу высоту, что вы спрашивали об этом, но я считаю, что это действительно дает вам окончательный результат, который вы искали.

добавление:

margin-right: -1px; 
border-right: 1px solid black; 

к первому столбцу позволяет ему share границу со второй колонкой. Таким образом, событие, когда первый столбец обтекает небольшие размеры экрана, как сейчас, в вашем примере, общая граница будет расширять всю высоту строки без видимых пробелов.

минорной ноте: вы пропали без вести с запятой здесь: word-wrap: break-word в .tablecol1

Fiddle

CSS

.tablecol1 { 
    display: inline; 
    width: 17%; 
    float: left; 
    font-size: 14pt; 
    word-wrap: break-word; 
    background-color: #fff; 
    padding-left: 1%; 
    margin-right: -1px; 
    border-right: 1px solid black; 
} 
.tablecol2 { 
    display: inline; 
    width: 80%; 
    float: left; 
    font-size: 11pt; 
    word-wrap: break-word; 
    border-left: 1px solid #000000; 
    padding-left: 1%; 
} 
.rowHolder { 
    overflow:hidden; 
    border-top:solid 1px #000000; 
    font-size:11pt; 
    word-wrap: break-word; 
    background-color:#fccfff; 
    position:relative; 
} 
.cleaner { 
    clear:both; 
    height:1px; 
    font-size:1px; 
    border:none; 
    margin:0; 
    padding:0; 
    background:transparent; 
}