HTML tables are used for displaying tabular data on the page.
Div's are used to build the entire layout of the page. It gives more layout control using CSS.

And i dont see any thing wrong with your above code and it works fine with my browser . But i recommend you should use Html tables itself as you want just tabluar data.

Thanx for the reply. I understand (and actually agree with) the argument but (call it self-education) I am still interested in determining to what extent css can do tables without using table tags.

In the code shown, the background should be yellow -- showing that the TblContainer div is in fact containing everything. It only shows up as a yellow band at the top of the cells in IE, FF and Chrome when I load it -- unless I delete the DOCTYPE. Are you seeing something different ?

Thanx for your help.

I have checked your code. The problem is with the positiong of floated div's in a nested div. Please add these css:-



I hope this will help you and for detailed explanation please go through this site:
http://www.positioniseverything.net/easyclearing.html

Thanks much for your replay. When I add the "clear:both" line the lower edge of the container moves down to contain the first row but not the second. Adding the "margin-right:3px" statement causes all 4 cells to stack vertically rather than appear 2 to a row horizontally. However, your reference was golden !

The reference has a link to a more recent article on this problem, offering up several solutions. The most elegant is to place an "overflow:auto" in the container. This works perfectly without any other changes.

One other solution that came from my son in San Francisco is to simple set the height of the row. Apparently floating the cells causes the container to lose track of the height of what it is enclosing.

All-in-all: "overflow:auto" seems to be the best solution.

Thanx much.

You are designing for the quirks mode of the browsers without the doctype. If you are in quirks mode, the browsers do weird things.

Standard mode puts the surrounding styles (margin, border, padding) OUTSIDE the width and height declarations, so you have to leave extra space for them.

Don't use pixels and points. Use percents and em, so the page is compatible with multiple screen resolutions.

Very good! Never heard of quirks mode but (after a short search for my education) this certainly explains the problem. (http://www.quirksmode.org/css/quirksmode.html - section on overflow:visible)

Thanx for the advice !

When you 'float' an element, it's like you're taking it on a higher plane. (think of the page as the airport and the floated div an... err... flying airplane)
Since the elements contained by the main div are all floated, the main div, in effect, has no 'content'. So all you see is its borders (the small band at the top).

The overflow: auto is a good solution... provided the 'overflowed' div doesn't span 100% of the page width.
If your overflowed div has 100% width, and the page exceeds one 'page length', the scrollbar that appears on the right causes the div have a less than 100% displaying area. So some browsers will display a horizontal scrollbar. Which is ugly. =(
I've had to reduce the width of my main container divs due to that problem.
And I'm still waiting for the table-cell, table-row, etc. values for the display property to be supported by all browsers.