How to use divs instead of tables - html

Question

I am trying to create the following table layout, but I want to use DIV instead of TABLE:
------------------
| | |
| CELL1 | CELL2 |
| | |
| |--------|
| | |
| | CELL3 |
| | |
------------------
I want the height of all the cells to be set by their content (i.e. no height: style)
I have tried using float:left on cell1, but can't seem to get cells 2 and 3 to behave.
EDIT
JS Fiddle here: http://jsfiddle.net/utZR3/
HTML:
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
<div class="list-row">
<div class="list-left">CELL1
</div>
<div class="list-right">
<div class="list-title">CELL2</div>
<div class="list-filters">CELL3
</div>
</div>
</div>
CSS:
.list-row {
background:#f4f4f4;
border:2px solid red;
}
.list-left {
width:auto;
padding:10px;
top:0px;
left:0px;
border: 2px solid blue;
}
.list-right {
top:0px;
left:60px;
padding:10px;
border:2px solid green;
}
.list-title {
font-size:18px;
padding:8px;
}
.list-filters {
padding:8px;
}

Answer 1

You need inline-block and float: here's the jsFiddle
.list-row {
background:#f4f4f4;
display:inline-block;
border:2px solid red;}
.list-left {
width:auto;
padding:10px;
float:left;
border: 2px solid blue;}
.list-right {
padding:10px;
float:right;
border:2px solid green;}
Also, since you're not using relative or absolute positioning, you don't need to specify top and left.

Answer 2

Try the following: (working jsFiddle)
HTML:
<div class="container">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
CSS:
.container{overflow:hidden; width:100%;}
.cell{width:50%; float:right;}
#cell1{float:left;}
Your approach (which places the divs in rows) is not a good choice in this case.. mine separates them by columns.

Answer 3

You could use display:inline-block instead of float. Just set widths of about 50% (adjust depending on padding, margins and borders) for the left and right containers and make them inline-block.
Here is my jsFiddle

Answer 4

rowspan is not avalaible for display:table,
but you can still use it to get close to what you are looking for.
http://codepen.io/anon/pen/kqDab
display:inline-table used for the show , so they stand aside each others. you can turn it back to display:table.
Options i see here is to set an height to parent container to have height:XX% avalaible for direct childs element (if it is: float, inline-block, table ...) .
Other option is vertical-align middle for the cell if display:table-cell;.
You HTML with the same CSS of first demo : http://codepen.io/anon/pen/dvlsG
edit display:flex is also a good option nowdays :http://codepen.io/anon/pen/aBjqXJ

Answer 5

<style>
.grid-container {
display: grid;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
use display grid for using div instead of table