title: Padding of div in another div affects other elements
body: <p>Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.</p>
  
  <p>I'm not sure if my approach is right but I tried to do it like this:</p>
  
  <pre><code>&lt;div id="navigation"&gt;
  
      &lt;div class="innen"&gt;
          &lt;div class="logo"&gt;
              &lt;a href="index.html"&gt;&lt;img class= "logo" src="logo.png" title="Logo"/&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="bar"&gt;
          &lt;!-- Navigation Items are in here --!&gt;
          &lt;/div&gt;
  
          &lt;div id="gamecard"&gt;
          &lt;!-- Another right floated Element !--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="unten"&gt;
          &lt;p&gt;You are here: &lt;a href="index.html"&gt;Main&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wanted to push down the bar div to meet the height of the image by using top padding:</p>
  
  <pre><code>#bar{
  padding-top: 80px;
  }
  </code></pre>
  
  <p>But now it moves the down gamecard container too. How can I prevent this from happening?</p>
  
  <p>I also added a jfiddle:
  <a href="http://jsfiddle.net/Cv4p2/" rel="nofollow">http://jsfiddle.net/Cv4p2/</a></p>