I shall directly dive into the code structure. In the following code there are two classes named “outer” and “inner”. We have to assign the class “outer” on the div which should be working like a table. And the class “inner” will be assigned to the inner div acting like a table row. Inside that div ( class = “inner” ) place multiple DIVs acting like table cells. In this example there are two DIVs with classes “header-left” and “header-right”. Go through the structure carefully.

The class “outer” has [ display="table" ] CSS attribure.
The “inner” class has [ display="table-row" ] . And all the DIVs inside this inner div will have the [ display="table-cell" ]. Notice the CSS code carefully.

.outer {
	display: table;
	width: 100%;
}

.inner {
	display: table-row;
}

.header-left {
	display: table-cell;
}

.header-right {
	display: table-cell;
	width: 400px;
}

There is also an example script attached illustrating this idea of using div like table which can be downloaded from this post. The final output should look like the following image in all browsers. This code has been tested in IE9, Firefox-4, Google Chrome 11, Safari 3.2.3 and Opera 11.10. This idea may help you design your web layout perfectly.

Download the code