title: How to use padding in div correctly?
body: <p>I’m trying to use padding in a div and which is wrapped by another div (‘container’), apologize for this simple question, but I couldn’t find an answer.</p>
  
  <p>As long as I don’t use <code>padding:10px;</code> the structure of the page is stable.
  i.e. the right div is floating to the left (‘content’ is aside ‘sidebar’).</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .container {
  max-width: 960px;
  background-color: RED;
  height: 200px;}
  
  .sidebar {
  background-color: GREEN;
  width: 30%;
  float: left;}
  
  .content {
  background-color: YELLOW;
  float: left;
  width: 70%;
  padding: 10px;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="sidebar"&gt;
      &lt;p&gt;text in sidebar&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
      &lt;p&gt;text in content&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When using <code>padding:10px;</code> the right div (‘content’) goes down under ‘sidebar’ instead floating to the side of ‘sidebar’.</p>
  
  <p>I’ve tried <code>clear: left;</code> (right, both) but it doesn’t help me.</p>
  
  <p>Any solution for the above and which is not particular style to <code>&lt;p&gt;</code> ,would be appreciated.</p>