Padding of div in another div affects other elements

Question

Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.

I'm not sure if my approach is right but I tried to do it like this:

<div id="navigation">

    <div class="innen">
        <div class="logo">
            <a href="index.html"><img class= "logo" src="logo.png" title="Logo"/></a>
        </div>

        <div id="bar">
        <!-- Navigation Items are in here --!>
        </div>

        <div id="gamecard">
        <!-- Another right floated Element !-->
        </div>
    </div>
    <div class="unten">
        <p>You are here: <a href="index.html">Main</a></p>
    </div>
</div>

I wanted to push down the bar div to meet the height of the image by using top padding:

#bar{
padding-top: 80px;
}

But now it moves the down gamecard container too. How can I prevent this from happening?

I also added a jfiddle: http://jsfiddle.net/Cv4p2/

Answer 1

try using position:absolute

<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>