Question

I’m trying to build a table-like layout with 2 columns where only some (few of) the cells have actually any data. About 50%-75% of the “cells” are gonna be blank/not existant, so I would like to accomplish this using divs if possible.

For example, for the following HTML:

<div id="wrapper">
    <div id="left">
        <div class="p1">l1</div>
        <div class="p3">l3</div>
        <div class="p4">l4</div>
        <div class="p5">l5</div>
    </div>
    <div id="right">
        <div class="p1">r1</div>
        <div class="p2">r2</div>
        <div class="p3">r3</div>
        <div class="p5">r5</div>
    </div>
</div>

“Cell” l1 should be at the same vertical position as r1, l3 as r3, l5 as r5, like this:

l1 r1
   r2
l3 r3
l4
l5 r5

I’ve been unable to accomplish this, so far I’ve tried:

• wrapper with position:relative, “cells” with position:absolute and positioning them with top: xxpx;
• floats

But nothing is working for me. Is there any way of doing this without actually filling in all the div “cells”, even if they are blank? That would really be like using a table, which is the only solution that is working for me at the moment.

Answer 1

Latest browsers. – José Luis 8 mins
ago

Cool. In that case, I’m going to suggest display: table-cell and friends.

It won’t work in IE7, but that won’t be a problem if you only care about the latest browsers.

I don’t particularly like the “divitus”, but there’s little that can be done about it.

JSFiddle

CSS

#wrapper { 
    border: solid 1px #0f0; 
    display: table 
}
#wrapper > div { 
    border: solid 1px #00f; 
    display: table-row 
}
#wrapper > div > div { 
    border: solid 1px #f00; 
    display: table-cell 
}

HTML

<div id="wrapper">
    <div>
        <div>l1</div>
        <div>r1</div>
    </div>
    <div>
        <div></div>
        <div>r2</div>
    </div>
    ..
</div>

---

Cells will be fixed width and height

In that case, you can also consider something simpler, and closer to what you originally had:

JSFiddle

CSS

#wrapper { 
    border: solid 1px #0f0; 
    background: #ccc; 
    float: left 
}
#left { 
    border: solid 1px #00f; 
    float: left 
}
#right { 
    border: solid 1px #f00; 
    float: left }
#left > div, #right > div {
    border: solid 1px #000;
    width: 50px;
    height: 50px
}

HTML

<div id="wrapper">
    <div id="left">
        <div>l1</div>
        <div></div>
        ..
    </div>

    <div id="right">
        <div>r1</div>
        <div>r2</div>
        ..
    </div>
</div>

---

A third idea, specifically catering to:

I was trying to avoid the <div></div>
thingy

You can omit empty cells now.

Personally, I’d rather just put up with having empty divs, because this is a little complicated.

I commented out rather than remove the “empty cells”.

JSFiddle

CSS

#wrapper {
    border: solid 1px #0f0;
    background: #ccc;
    float: left;
    width: 100px
}
#wrapper > div {
    outline: solid 1px #000;
    width: 50px;
    height: 50px
}

.l {
    float: left
}
.r {
    float: right;
}
.r + .r + .l {
    clear: right;
    background: red
}
.l + .l {
    clear: left;
    background: blue
}
.r + .r + .r {
    clear: right;
    background: #666
}

HTML

<div id="wrapper">
    <div class="l">l1</div>
    <div class="r">r1</div>

    <!--<div class="l">l2</div>-->
    <div class="r">r2</div>

    <div class="l">l3</div>
    <div class="r">r3</div>

    <div class="l">l4</div>
    <!--<div class="r">r4</div>-->

    <div class="l">l5</div>
    <div class="r">r5</div>

    <!--<div class="l">l6</div>-->
    <div class="r">r6</div>

    <!--<div class="l">l7</div>-->
    <div class="r">r7</div>

    <div class="l">l8</div>
    <div class="r">r8</div>

    <div class="l">l9</div>
    <!--<div class="r">r9</div>-->

    <div class="l">l10</div>
    <!--<div class="r">r10</div>-->

    <div class="l">l11</div>
    <div class="r">r11</div>
</div>

This should be a reasonably extensive HTML test case.