Creating The Same Thing With Divs As Tables

I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs. I'm trying to accomplish the same thing with divs

Solution 1:

It's good to see that you are converting tables into divs, however make sure you only do this where necessary.

If the data on the page is tabular, then it makes sense for this to be put in a table element.

Div's are for layout and structure, table's are for displaying tabular data.

A collegue of mine once spent ages building a forum out of divs which followed a table structure. This was all because he'd been told "tables are bad, use divs and CSS". It's important to remember this is only referring to layout structure.

If your structure has rows and columns, then use a table. tables are still valid useful HTML elements, and are far from deprecated.

Solution 2:

Here you go:

HTML:

<divid="wrap"><h2> Div </h2><divclass="section"><div> Test </div><div> 1 </div></div><divclass="section"><div> Test </div><div> 2 </div></div></div>

CSS:

#wrap {
    border: 2px solid #333;
    padding: 2px;
}

h2 {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 4px0;
}

.section {
    overflow: auto;
    margin-top: 2px;
}

.section > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #333;
    color: white;
    padding: 4px0;
}

.section > div + div {
    text-align: center;
    border-left: 2px solid black;
}

Live demo:http://jsfiddle.net/jNQrM/1/

Solution 3:

1. Get a good book - I recommend CSS: The Missing Manual (Missing Manuals)

2. look up float a long with display esp relative

Solution 4:

Put float:left; on this class : div.row

Solution 5:

Take a look to the css display property.

.line {
display: table;
}

.row {
display: table-cell;
}

But you should get some problems with internet explorer. In that caase you could use display: inline; with a zoom:1;