How to Create a Table-Like CSS Layout with Divs

Layout with divs instead of table

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.

How to create table like structure using div in HTML

If you change the row and cell display types to table and table-cell, you'll get what you want. Also, set the row to width: 100% and drop the float: right.

<html>
<head>    <style>        .row {          display: table;          width: 100%;        }
        .cell {            padding: 0;            margin: 0;            display: table-cell;            border: solid;        }
        div#leftCol {            width: 17%;        }
        div#rightCol {            width: 83%;        }    </style></head>
<body>    <div class="row">        <div class="cell" id="leftCol">            Menu Bar here        </div>        <div class="cell" id="rightCol">            Content here        </div>    </div>
</body>
</html>

Layout divs in css like table cells in HTML Tables

You can use display:table to create this effect, I made a quick fiddle

This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.

You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)

How to create a table-like CSS layout with DIVs?

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .

You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.

the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in

this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns

there is a lot less container divs needed for this and the content is now before the sidebar in the source

Here's the fiddle : fullsize : to edit

Layout a table by DIV elements

If it's a true table layout, it's appropriate to use an html table. If it is not a true table layout, here's what you need in your CSS if you were to keep the HTML unchanged:

.small {float:left; clear: both;}
.left {float:left: clear: both;}
.right {float:left;}

"clear: both" is sort of like a carriage return (ding! for all you with memory of typewriters)
"float:left" puts stuff next to each other horizontally instead of the natural vertical stacking of box elements (like divs).

For my own table-ish CSS layouts, I use only two classes, "row" and "column", as follows:

/* Standard CSS for div tables.  By Tom Haws
 * Overview:
 * 1. a row is a box element that wants all its children to be
 *    arranged in a (horizontal) row
 *    and is itself a new line rather than a continuation of a line.
 * 2. a column is a box element that wants all its children to be
 *    arranged in a (vertical) column
 *    and is itself a continuation of a line unless it is 
 *    the first column in a row.
 * 
 * */
/* Any child of a row AND any column class that is anything but first-child 
 * represents another column continuing the same row 
 * */
.row>*, .column
{
    float: left;
}
/* Every first child of a row and every column that is a first child of any parent 
 * represents a new row (first column) 
 * */
.row>*:first-child, .column:first-child 
{
    clear: both; 
    float: left;
}
/* All rows and all children of a column are a new line.
 * */
.row, .column>*
{
    clear: both;
    float: left;

}

Here's how I'd do your little example:

<div class="row">
    <div>left1</div>
    <div>right1</div>
</div>
<div class="row">
    <div>left2</div>
    <div>right2</div>
</div>

Feel free to ask any follow-ups about the nuances of the CSS markup and what it's doing.

CSS creating evenly spaced table using divs

You can get something like this with Flexbox if you set margin on flex-items and then same amount of padding on flex-container. That will create same spacing between each flex-item and parent and flex-items

body {  margin: 0;}.showCases {  background-color: #000;  display: flex;  padding: 10px;}.showCases > div {  flex: 1;  margin: 10px;  color: #fff;  border: 1px solid #fff;}

<div class="showCases">  <div>box1</div>  <div>box2</div></div>

How to create a table only using div tag and bootstrap?

This isn't Bootstrap, this is just native HTML and CSS, but you can build table layouts (and table-like layouts) using:

CSS Tables
CSS Flex (with caution, see below)
CSS Grid

Here's a quick primer:

Table Layout using CSS Tables

You can create tabular layouts using CSS Table display values:

display: table // <table>
display: table-header-group // <thead>
display: table-row-group // <tbody>
display: table-row // <tr>
display: table-cell // <td> & <th>

Working Example:

/* HTML TABLE STYLES */

table thead {
font-weight: bold;
background-color: rgb(191, 191, 191);
}

table th, table td {
padding: 0 6px;
text-align: center;
}

/* CSS TABLE STYLES */

.css-table {
display: table;
}

.css-table-header {
display: table-header-group;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-table-body {
display: table-row-group;
}

.css-table-row {
display: table-row;
}

.css-table-header div,
.css-table-row div {
display: table-cell;
padding: 0 6px;
}

.css-table-header div {
text-align: center;
border: 1px solid rgb(255, 255, 255);
}

<h2>HTML Table</h2>
<table>
<thead>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</thead>

<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>

<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>

<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>

<h2>CSS Table</h2>
<div class="css-table">
<div class="css-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-table-body">
<div class="css-table-row">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>
</div>

<div class="css-table-row">
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>
</div>

<div class="css-table-row">
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>
</div>