title: how to style dl tag that dt and dd are in same column and both combinely inline
body: <p>i want to try something like this
  HOME           |    Contact        |     BLOG
  back to home   |    lets know us   |     follow our updates</p>
  
  <p>mean back to home is jst under the HOME and then a border then lets know us is also under the Contact like a colum 
  and my code is
  html:</p>
  
  <pre><code>&lt;dl class="dl"&gt;
  
    &lt;dt class="nav"&gt;&lt;a href=""&gt;&lt;b&gt;HOME&lt;/b&gt;&lt;/a&gt;&lt;/dt&gt;
          &lt;dd class="nav1"&gt;Back to home&lt;/dd&gt;
  
  
    &lt;dt class="nav"&gt;&lt;a href=""&gt;&lt;b&gt;PRODUCTS&lt;/b&gt;&lt;/a&gt;&lt;/dt&gt;
         &lt;dd class="nav1"&gt;What we have for you&lt;/dd&gt;
  
    &lt;dt class="nav"&gt;&lt;a href=""&gt;&lt;b&gt;SERVICES&lt;/b&gt;&lt;/a&gt;&lt;/dt&gt;
         &lt;dd class="nav1"&gt;Things we do&lt;/dd&gt;
  
    &lt;dt class="nav"&gt;&lt;a href=""&gt;&lt;b&gt;BLOG&lt;/b&gt;&lt;/a&gt;&lt;/dt&gt;
         &lt;dd class="nav1"&gt;Follow our updates&lt;/dd&gt;
  
    &lt;dt class="nav"&gt;&lt;a href=""&gt;&lt;b&gt;CONTACT&lt;/b&gt;&lt;/a&gt;&lt;/dt&gt;
        &lt;dd class="nav1"&gt;Ways to reach us&lt;/dd&gt;
  
  &lt;/dl&gt;
  
  css:
  
  #header .dl{
      text-decoration:none;
      height:50px;
      width:60%;
      float:right;
      list-style:none;
      margin-right:10px;
      margin-top:40px;
  
      }
  #header .nav{
  
      display:inline;
      color:#666;
      font-family:Tahoma, Geneva, sans-serif;
      text-decoration:none;
      margin-left:10px;
      font-size:15px;
      border-right:1px dotted #CCCCCC;
      float:left;
      padding-right:15px;
      padding-left:20px;
  
  
      }
  #header .nav a{
      color:#009;
      text-decoration:none;
      }
  #header .nav a:hover{
      color:#09f;
      }
  #header .nav1{
  
  
      clear:both;
      }
  </code></pre>
  
  <p>help me</p>