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 using them -- I frankly find the alignment and layout features of CSS inadequately powerful for me to, cold turkey, stop using tables. With my personal programmer idiosyncrasies set aside, I would like to try to attack one of my major discontentments with the CSS system:

Let's say I want to have a layout like this:

+---+---+ | A | B | +---+---+ | C | D | +---+---+ 

In the above example, I would like the widths of A and C to be the same, and the widths of B and D to remain the same.

I would also like the heights of A and B to remain locked together, and I would like the heights of C and D to stay the same as each other.

To clarify, if any element in a column gets wider, I'd like all of the elements in that column to get wider. And if any element in a row gets taller, I, again, want all of the elements in that very same row to get wider as well.

What I have just described is the exact functionality of our old friend, the table. In my opinion, tables are very useful for these kinds of layouts! If I were to attempt something similar to that using CSS layouts, I might get something like this:

+-------+---+ |   A   | B | +---*---*---+ | C |   D   | +---+-------+ 

Which would very much NOT be the kind of layout I am looking for. (A and C make jagged columns, as opposed to perfect, smooth columns as I would prefer)

To put my problem simply, I could really use a way to, using CSS layouts (and NOT predefined widths or heights) align the position of an edge of one CSS box, to the position of an edge of a different CSS box. If CSS supported that one simple feature, I could instantly let go of tables forever, and create layouts beyond even the capabilities of tables! A good, but useless example of such power would be two disconnected boxes on opposite sides of a table, dynamically sharing exactly the same height and vertical position as each other.

But unfortunately, in my searches around the internet, the most advanced alignment I've found so far is center, left, and right alignment. All alignment types that are not relative to OTHER elements, making them useless.

All I want is just a way to align HTML elements to OTHER HTML elements without having to use tables!

EDIT

While picking the tags for this question, I came across a description that pretty much sums it all up:

Relativelayout: A Layout where the positions of the children can be described in relation to each other or to the parent.

Is there a CSS RelativeLayout? Or am I stuck using tables whenever I want to do this?

I will accept the answer that comes closest to my desired functionality without using predetermined widths or heights (Including the answer "Nothing like that exists" if no one else provides something better).

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