Question

I’ve been trying to figure out how to make a row with 4 colums using div-elements.

The first and the third column should be 46px wide. The second and fourth column should be 50% of the left place (like 100% window width – 46*2) wide. I realized that already as you can see here in the first grey box.

Well, the text of the second and fourth column can be longer and I want it to break in the div .

The second grey box shows you how it looks like when the text is longer.
The third grey box shows you another try with ‘display:table-cell’. The only problem is that the width of 50% of the second column just decreases while the width of the fourth column increases.

I need both columns to have the same width. Have you got an idea how I to achieve it?
Thank you in advance.

Answer 1

I decided to adapt your display: table-cell version.

The most important change was adding table-layout: fixed. What that does is equally distribute the remaining available width between the columns without a specified width.

See: http://jsfiddle.net/thirtydot/5p5V9/2/

CSS:

.outer {
    color: #ffffff;
    background-color: #373737;
}

.inner {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.inner > div {
    display: table-cell;
}
.alignC {
    text-align: center;
    font-weight: bold;
    color: #949494;
    background-color: #2e2e2e;
}
.first, .alignC {
    width: 46px;
    font-weight: bold;
}

.alignR, .alignL {
    background: #666;
}​

HTML:

<div class="outer">
    <div class="inner">
        <div class="first">1</div>
        <div class="alignR">r</div>
        <div class="alignC">m</div>
        <div class="alignL">This long text shall break in the div</div>
    </div>
</div>

Browser support for display: table-cell.