Web >> Design >> CSS >> How to split a div into 2 columns like a table row with 2 columns

CSS:

div.row span.left {
  float: left;
  text-align: left;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

div.row span.right {
  float: right;
  text-align: right;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

HTML:

<div style="border-right: #333 1px solid; padding-right: 0px; border-top: #333 1px solid; padding-left: 0px; padding-bottom: 0px; margin: 0px auto; border-left: #333 1px solid; width: 90%; padding-top: 0px; border-bottom: #333 1px solid; background-color: #666">

<div class="spacer">&nbsp;</div>
<div class="row">
<span class="left"> Home&nbsp;&gt;&nbsp;Products</span>
<span class="right"> [logo]</span></div> <div class="spacer">&nbsp;
</div>
</div>