CODEWITHSUNDEEP
htmlcss
Rhys Wynne
Rhys Wynne

Reputation: 394

Floating DIVs add padding to the bottom

Having a strange issue with floating divs with background colours.

We've designed a div to mimic a banner functionality for a client. The banner can be aligned left/right of text or neither.

When the banner is not aligned, then the banner looks as it should. However, extra padding is added when the banner is floating left/right. 

Here's an example - http://jsfiddle.net/ZSE93/

If you have any ideas, that'd be great. Or if you have any questions, I'll happily explain them.

Cheers

Upvotes: 0

Views: 43

Answers (2)

Kisspa
Kisspa

Reputation: 584

do you mean this example

.banner{
  float:right;
}

http://jsfiddle.net/kisspa/5dgFv/

Upvotes: 0

Last1Here
Last1Here

Reputation: 1079

it's due to the margin-bottom on the inner p, below are two options to fix this

.banner p {
    font-size: 12px;
    margin-bottom: 0;
}

or

.banner p {
    font-size: 12px;
    display: inline-block;
}

And a fiddle showing the fix.

Upvotes: 1

Related Questions