CODEWITHSUNDEEP
htmlcss
Kratalin Jan
Kratalin Jan

Reputation: 105

No result for padding-top with float: right

I have this:

HTML:

<div class="menu">
    <div class="logo">
        <img src="http://placehold.it/200x50"/>
    </div>
    <div class="add">
        <a href="#" class="link">Lorem ipsum</a>
    </div>
</div>

CSS:

.menu {
    width: 80%;
    margin: 0px auto;
}
.menu .logo {
    float: left;
}
.menu .add {
    float: right;
}
.menu .add .link {
    color: white;
    background: red;
    padding-top: 20px;
}

but padding-top isn't working and I can't figure out why. I've tried with margin-top: 20px;, same result.

Here is JSFiddle: http://jsfiddle.net/Jsv75/

Upvotes: 1

Views: 64

Answers (3)

Jonathan
Jonathan

Reputation: 1833

You can't add padding top to an a tag as default, you need to make it an inline-block element

.menu .add .link {
    display:inline-block;
    color: white;
    background: red;
    padding-top: 20px;
}

Upvotes: 0

tjons
tjons

Reputation: 4769

Try taking out the .link class in your css, like so:

.menu .add{
    color: white;
    background: red;
    padding-top: 20px;
}

It works for me: http://jsfiddle.net/TJonS/hvaSs/

Upvotes: 0

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

The link needs to be made block level with: display: block;

http://jsfiddle.net/Jsv75/1/

.menu .add .link {
    color: white;
    background: red;
    padding-top: 20px;
    display: block;
}

Upvotes: 2

Related Questions