1 reply [Last post]
spocky
Offline
newbie
Last seen: 5 years 4 weeks ago
Joined: 2004-11-10
Posts: 3
Points: 0

I am trying to build a table using divs and css with a minimum amount of code. To do this I have come up with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<title>Table without a table</title>
<style>
.column {
	float:left;
	border-top:1px solid #ff6600;
	border-left:1px solid #ff6600;
	margin-top:50px;
}
.column:first-child {
	margin-left:50px;
}
.column:last-child {
	border-right:1px solid #ff6600;
}
.column p {
	border-bottom:1px solid #ff6600;
	padding:5px;
}
</style>
</head>
<body>
<div class="column">
  <p>Cell 1</p>
  <p>Cell 2</p>
  <p>Cell 3</p>
</div>
<div class="column">
  <p>Cell 4</p>
  <p>Cell 5</p>
  <p>Cell 6</p>
</div>
<div class="column">
  <p>Cell 7</p>
  <p>Cell 8</p>
  <p>Cell 9</p>
</div>
</body>
</html>

This works fine in Firefox, but the right border is not displayed in IE8. Does anyone know how to solve this?

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 4 years 47 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Add a class to the last column.

Add a class to the last column. :last-child is supported in Firefox, likely Opera now, not sure who else. That Microsoft was finally able to create a browser that adheres to decade-old specs was quite a feat for it, seeings how a small private Norwegian company and two open-source rendering engines with nothing but volunteers managed it long ago...

Trying to build a table out of divs and css for anything other than brain exercise is as silly as building a house out of spoons... though I have seen some pretty neat houses built out of garbage.