title: floating elements <br clear="both"/> in a better css way?
body: <p>I have a few floating elements like a sidebar that floated besides a content area. If I don't add a <code>&lt;br clear="both"/&gt;</code> at the end of the sidebar, then footer and parts of the background get floated weird.</p>
  
  <p>Any quick solution I missed to think of?</p>
  
  <p>Thank you.</p>
  
  <p><strong>Edit:</strong> For example, I want the borders to have no gaps and the backgrounds should have no spaces either. Should just look like two sections: 1) content with sidebar 2) footer</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;layout&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
      body {
          margin:0;
          padding:0;
      }
  
      #main {
          background:#cfcfcf;
      }
  
      .inner {
          margin: 0 auto;
          padding: 96px 72px 0;
          width: 1068px;
          border-color: #000;
          border-style: solid;
          border-width: 0 1px;
          color: #3C3C3C;
      }
  
      .post {
          width: 705px;
          background:#999;
          float:left;
      }
  
      #comments, #respond {
          background:#999;
      }
  
      #sidebar {
          background:#777;
      }
  
      #footer {
          clear:both;
          background:gray;
      }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="main"&gt;
  
          &lt;div class="inner"&gt;
  
              &lt;div id="post" class="post"&gt;
  
                  &lt;h2&gt;Lorem Ipsum Test Page&lt;/h2&gt;
  
                  &lt;div class="entry"&gt;
  
                      &lt;p&gt;Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
  
                      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
  
                  &lt;/div&gt; &lt;!-- entry --&gt;
  
              &lt;/div&gt; &lt;!-- post --&gt;
  
              &lt;div id="sidebar"&gt;
  
                  &lt;h2&gt;Meta&lt;/h2&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Login&lt;/li&gt;
                          &lt;li&gt;Anything&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;h2&gt;Subscribe&lt;/h2&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Entries (RSS)&lt;/li&gt;
                          &lt;li&gt;Comments (RSS)&lt;/li&gt;
                      &lt;/ul&gt;
  
              &lt;/div&gt; &lt;!-- sidebar --&gt;
  
          &lt;/div&gt; &lt;!-- inner --&gt;
  
      &lt;/div&gt; &lt;!-- main --&gt;
  
      &lt;div id="footer"&gt;
          &lt;div class="inner"&gt;
  
          Something
  
          &lt;/div&gt; &lt;!-- inner --&gt;
      &lt;/div&gt; &lt;!-- footer --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>