CSS Table-Like Alignment Using No Tables? (CSS Relativelayout)

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

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.

How to style and align forms without tables?

This might not get a lot of support but here's my two cents:

In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)

Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.

Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.

Does Firefox support position: relative on table elements?

Easy and most proper way would be to wrap the contents of the cell in a div and add position:relative to that div.

example:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

How to put elements to same row

First of all I recommend reading up on some basic HTML, tables specifically.
To display elements in a line without any changes in the html there are 2 approaches:

1. display: inline; or display: inline-block; (inline-block makes the element appear in a line while keeping the benefits of a block level element)
2. float: left;

Both of the CSS rules have to be applied to all the elements you want to display in a row, preferrably by a rather specific selector like .list-element which would target all elements with the class list-element or #mylist > div which targets all div elements that are direct descendants of the element with id mylist.

---

Related Topics