CSS Table-Like alignment using no tables? (CSS RelativeLayout)

Question

Wherever I go on the internet, I am constantly having it beat into me that I should not use Tables. Sadly, I am one of the few programmers who is stubborn enough to still be usi

Answer 1

It is possible to display elements as tables that aren't semantically tables, only using CSS. Using the display property, you can imitate tables while you have divs in your markup. Check this article.

Depending on what you want to achieve, there are some alternative options. If you only want the two rows in each column stick to the width of the column, you should try putting the rows inside the column tag instead of doing the opposite. This is working without predefined dimensions.

Also, if the heights are set the same for each cell in a row you could simply float them to left, and set container width to the sum of row width. This only works with predefined dimensions.

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

Here is a fiddle: http://jsfiddle.net/kdani3/DbRuV/

A more complex example: http://jsfiddle.net/kdani3/DbRuV/1/

I think it's really simple, even simpler than using a table layout.

Also, I really recommend you to take a look at CSS grid frameworks, like Twitter Bootstrap. That's definitely worth a look.

Answer 2

I think for using pure CSS, with no Width, and no using table you can use Flex Layout

This is the code

HTML

<section class="flexrow">
    <div class='item'>1asdf</div>
    <div class='item'>2</div>
</section>
<section class="flexrow">
    <div class='item'>1</div>
    <div class='item'>2</div>
</section>

CSS

.flexrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    margin-bottom: 10px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
}
.item {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    margin: auto 10px;
    border-radius: 5px;
    border:1px solid black;
}

Here is the JsFiddle