Layout with divs instead of table

Question

I'm wondering what way would be best in replacing the table-layout to divs. I've been trying some myself but it messed up my 4x4 divs very much. I'm guessing this isn't very hard to accomplish when having the experience to do such things but I'm all new to divs and trying to learn this :)

Take a look at this and share your opinions on if the table should stay as it is or if it should be replaced with divs: http://jsfiddle.net/CZdux/

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>

Answer 1

What way would be best in replacing the table-layout to divs ??

Reformat everything like a table with the display property. ;)

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

jsFiddle here

Answer 2

Floated columns

There's no need for an HTML table in this case.

HTML tables are appropriate for data grids, but for general layout (establishing columns and such) floats are almost always the best option (as @GrantMynott suggested). Although the cards on this page appear in a grid pattern, it's not really a data grid.

If you add a clearfix to your CSS file, you can greatly simplify the use of floats (and creating columns). Everytime you have a container with floated columns, you add the clearfix class to the container. Then you don't have to worry about the details of clearing the floated columns.

Here's an example, using a traditional version of clearfix (which is a good version to start with):

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

This example uses generic names for the CSS classes ("columns", "column1", column2"). Names that are more meaningful for the page in question can be used as needed.

Update

After looking at your revised demo:

• There was a typo with the class name "co12" that was preventing that column from being floated. I updated the name to "column2", to make that sort of typo less likely.
• It's a good idea to add a clearfix to the cards container as well (since the cards are floated), just to be safe. At present, the cards container is the left-hand column itself, so it would be added there.
• This may be a personal preference, but I've found it to be slightly safer to float all columns in the same direction (usually left), than to have a mix of some floated left and some floated right. Mixing directions in the same container is not as stable in some cases (or at least, on older browsers), though in most cases it's safe to do so.

Updated demo

At this point, you just need to add heights or vertical margins (or padding) to the content in the right-hand column. I added a div container around the logo image, to make this a little easier. There could optionally be a div container around the button too, though you could probably manage without one.