CODEWITHSUNDEEP
csshtmlwebpadding
arnoapp
arnoapp

Reputation: 2506

Padding of div in another div affects other elements

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/

Upvotes: 3

Views: 5708

Answers (2)

1911 Soldier
1911 Soldier

Reputation: 143

Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.

Upvotes: 1

kirk
kirk

Reputation: 1007

try using position:absolute

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

Upvotes: 3

Related Questions