title: CSS Missing right border in tableless coding
body: <p>I have created a CSS 2-column page without the use of tables. Within each column, I want to display boxes in these columns, again without the use of a table. I am able to create the 2 columns and boxes within each column but the issue is, within each box, the right border is missing. Here is a screenshot showing the <a href="http://i.imgur.com/FfrUTjB.jpg" rel="nofollow">issue</a>:</p>
  
  <p>What is wrong with the code? How do I display the border on the right using tableless coding and valid markups? Here are the codes:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;box-in-columns&lt;/title&gt;
  &lt;style media="screen" type="text/css"&gt;
  body {
  background:#FDEDF2;
  margin:0;
  padding:0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 9pt;
  }
  #header h1, #header h2, #header p {
  margin-left:2%;
  padding-right:2%;
  }
  #footer {
  clear:both;
  float:left;
  width:100%;
  }
  #footer p {
  margin-left:2%;
  padding-right:2%;
  }
  #container2 {
  clear:left;
  float:left;
  width:100%;
  overflow:hidden;
  background:#FDEDF2;
  }
  #container1 {
  float:left;
  width:100%;
  position:relative;
  right:50%;
  background:#FDEDF2; 
  }
  #col1 {
  float:left;
  width:46%;
  position:relative;
  left:52%;
  overflow:hidden; 
  }
  #col2 {
  float:left;
  width:46%;
  position:relative;
  left:56%;
  overflow:hidden;
  }
  #table {
  display:table;
  width:100%;
  margin:0;
  padding:4px;
  border:1px solid #607080;  
  background:#FFFFFF;
  }
  .row-header {
  display:table-row;
  color: #b00020;
  }
  .row {
  display:table-row; 
  }
  .row a {
  text-decoration:none;
  }
  .row a:hover {
  text-decoration:underline;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
  &lt;h1&gt;This is the header&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="container2"&gt;
  &lt;div id="container1"&gt;
  &lt;div id="col1"&gt;
  &lt;p&gt;
  &lt;span id="table"&gt;
  &lt;span class="row-header"&gt; News &lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.cnn.com/"&gt; CNN &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.usatoday.com/"&gt; USA Today &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;span id="table"&gt;
  &lt;span class="row-header"&gt; Technology &lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.google.com/"&gt; Google &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.yahoo.com/"&gt; Yahoo&lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="col2"&gt;
  &lt;p&gt;
  &lt;span id="table"&gt;
  &lt;span class="row-header"&gt; Stores &lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.walmart.com/"&gt; Walmart &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.pigglywiggly.com/"&gt; Piggly Wiggly &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;span id="table"&gt;
  &lt;span class="row-header"&gt; Games &lt;/span&gt;
  &lt;span class="row"&gt; &lt;span class="cell"&gt; &lt;a href="http://www.gamespot.com/"&gt; GameSpot &lt;/a&gt; &lt;/span&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
  &lt;p&gt;This is the footer&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>