Member Avatar for FeralReason

Admittedly, I'm new to CSS but I am having some difficulty converting tables to CSS. Here is a CSS example for a simple 4 cell table that works fine -- but only without the DOCTYPE declaration (any DOCTYPE declaration)!

Does anyone know what, if anything, I am doing wrong ? Any help would be appreciated.

(Also I would like to see any successful examples anyone would like to post.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
	.TblContainer {
		width:400px;
		font-family:Arial,Helvetica,sans-serif;
		background-color:yellow; 
		border:1px solid #CCCCCC;
		margin:3px 3px 3px 3px;
	}
	
	.Row {
		margin:3px 3px 3px 3px;
	}
	
	.Cell {
		color:#000000;
		border:1px solid #CCCCCC;
		float:left;
		font-size:16px;
		text-align:center;
		width:49%;
	}
</style>
</head>
<body>
<div class="TblContainer">
	<div class="Row">
		<div class="Cell">Cell 1</div>
		<div class="Cell">Cell 2</div>
	</div>
	<div class="Row">
		<div class="Cell">Cell 3</div>
		<div class="Cell">Cell 4</div>
	</div>
</div>  
</body>
</html>
  • 4 Contributors
  • 7 Replies
  • 196 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by kanaku
Member Avatar for siji44

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.

Member Avatar for FeralReason

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.

Member Avatar for siji44

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

.Row{
margin:3px 3px 3px 3px;
[B]clear: both;[/B]
}


.Cell {
	color:#000000;
		border:1px solid #CCCCCC;
		float:left;
		font-size:16px;
		text-align:center;
		width:49%;
                   [B]margin-right:3px;[/B]	}

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

Member Avatar for FeralReason

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

.Row{
margin:3px 3px 3px 3px;
[B]clear: both;[/B]
}


.Cell {
    color:#000000;
        border:1px solid #CCCCCC;
        float:left;
        font-size:16px;
        text-align:center;
        width:49%;
                   [B]margin-right:3px;[/B] }

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.

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for MidiMagic

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.

commented: Answers the "why" part of my question ! +1
Member Avatar for kanaku

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.