CSS Table-Like alignment using no tables? (CSS RelativeLayout)
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
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.