title: How to make tabs with pure HTML/CSS
body: <p>I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.</p>
  
  <p>If I don't add <code>display: table</code> to the <em>ul</em>, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
            ul.tabs {
                display: table;
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
  
            ul.tabs&gt;li {
                float: left;
                padding: 10px;
                background-color: lightgray;
            }
  
            ul.tabs&gt;li:hover {
                background-color: yellow;
            }
  
            ul.tabs&gt;li.selected {
                background-color: orange;
            }
  
            div.content {
                border: 1px solid black;
            }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;ul class="tabs"&gt;
              &lt;li class="selected"&gt;One&lt;/li&gt;
              &lt;li&gt;Two&lt;/li&gt;
              &lt;li&gt;Three&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="content"&gt;
              This should really appear on a new line.
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>