How to use divs instead of tables

Question

I am trying to create the following table layout, but I want to use DIV instead of TABLE:

------------------
|       |        |
| CELL1 |  CELL2 |
|       |              


        

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

<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

Answer 3

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 4

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 5

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