Member Avatar for samarudge

So I'm trying to get 3 DIVs to line up as columns horizontally.
I've got it to work in some browsers but not all.
It's supposed to look like
[IMG]http://www.cake-spoon.com/wp-content/uploads/2010/08/Screen-shot-2010-08-25-at-11.46.10.png[/IMG]
However in some browsers it looks like
[IMG]http://www.cake-spoon.com/wp-content/uploads/2010/08/Screen-shot-2010-08-25-at-11.46.30.png[/IMG]
The code I'm using (Stripped of all the crap) is

<div id="product_col1">
     <!--Contents of column 1-->
</div>

<div id="product_col2">
     <!--Contents of column 2-->
</div>

<div id="product_col3">
     <!--Contents of column 3-->
</div>
#product_col1{
	width:388px;
	height:auto;
	min-height:10px;
	display:table-cell;
	vertical-align:top;
}

#product_col2{
	margin-left:10px;
	width:310px;
	height:auto;
	min-height:10px;
	display:table-cell;
	padding-left:10px;
	padding-top:10px;
	vertical-align:top;
	vertical-align:top;
}

#product_col3{
	margin-left:22px;
	width:137px;
	height:auto;
	min-height:10px;
	display:table-cell;
	padding-left:10px;
	padding-top:10px;
	vertical-align:top;
}

How do I get them to display properly?
-Sam

  • 2 Contributors
  • 1 Reply
  • 124 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for hielo 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
<style type="text/css">
.col{float:left;}
.lastCol{float:none}

#product_col1{width:30%;}
#product_col2{width:30%;}
#product_col3{width:30%;}
</style>

	</head>
	<body>
		<div id="product_col1" class="col">
     	<!--Contents of column 1-->a
		</div>

		<div id="product_col2" class="col">
     	<!--Contents of column 2-->b
		</div>

		<div id="product_col3" class="col lastCol">
     	<!--Contents of column 3-->c
		</div>
	</body>
</html>
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.