CODEWITHSUNDEEP
csshtmlcss-float
user429620
user429620

Reputation:

inline-block div not applying padding correctly

You can see an example here:

http://users.telenet.be/prullen/portfolio_test.html

I have set a padding of 100px (all directions) to the portfolio_item class (3 items on that page). The top, bottom, and left paddings are applied. But the right padding doesn't seem to work; the text extends beyond the boundary of the div. 

.portfolio_item {
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 100px;
}

I have tried changing the div to a float:left instead of display:inline-block but that didn't help.

Ideas are appreciated.

Thank you, Wesley

Upvotes: 1

Views: 2472

Answers (5)

Ravichandran Jothi
Ravichandran Jothi

Reputation: 3066

you can give like this,

 .portfolio_item {
        clear: both;
        display: inline-block;
        padding: 100px;
        width: 87%;
    }

Upvotes: 0

Chris
Chris

Reputation: 26888

Applying box-sizing: border-box; on your .portfolio_item should fix the issue. You'll have to include some specific vendor prefixes for this to work on all modern browsers:

.portfolio_item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Little demo: little link.

Upvotes: 2

Ryan Rich
Ryan Rich

Reputation: 12055

Instead of applying the padding to the div, target the text specifically. Place the text in a 'p' tag and call it in the CSS. 

.portfolio_item p{
     padding: 100px;
}

Upvotes: 0

Samuel
Samuel

Reputation: 17171

You set the width of the inside to 100%, but with the padding the width is actually 100% + 200px. I would recommend changing

width: 100%;

To

width: 600px;

Or changing the padding to a percent like:

width: 80%;
padding: 10%;

Upvotes: 0

feeela
feeela

Reputation: 29932

More than one parent element (.out anb .in) has overflow: hidden; applied. The overall container is set to a width of 800 pixel and thus the right side of the content is hidden. The padding itself works – you just don't see it in your current setup.

<div style="width:800px; border:2px dashed red;">
    <div class="out">
        <div class="in">

<!-- … -->

Upvotes: 0

Related Questions