ячейка таблицы в div не работает

Question

Я использую таблицу и ячейку таблицы на своем веб-сайте.Самый левый столбец должен начинаться сверху.Вместо этого он идет ко дну.Ниже приведена ссылка на эту проблему, где серый div начинается с самого низа.

http://jsfiddle.net/HtAJw/9/

Answer 1

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

http://jsfiddle.net/HtAJw/10/

HTML:

<div class="parent">
    <div class="child">
        <fieldset>
                a
        </fieldset>
    </div>
    <div class="child" >
        <div class= "newChildLeft">
                a <br/> b<br/> b<br/> b<br/>
        </div>
        <div class= "newChildRight">
                b<br/> b<br/> b
        </div>
   </div>
</div>

CSS:

.parent {
    width: 100px;
    display: table;
    border: 1px solid green;
    height: 100%
}
.child {
    background: blue;
    display: table-cell;
    height: inherit;
    width: 50px;
}
.newChildLeft {
    float: left;
    width: 25px;
}
.newChildRight {
    float: right
    width: 25px;
}
.child + .child {
    background: red;
    width: 50px;
}
fieldset {
    height: 100%;
    background-color: #666;  
    width: 50px;
}