CODEWITHSUNDEEP
csshtml
capcom
capcom

Reputation: 525

inline-block div overflowing when divs inside have padding or magins

Take a look at the following JSBin: http://jsbin.com/iheNOvo/3/edit

Here is the code also:

<html>
<head>
    <style type="text/css">
        #container {
            display: inline-block;
            width: 50%;
            height: 20%;
        }

        #elem1 {
            background-color: green;
            width: 50%;
            height: 100%;
            float: left;
            padding-right: 2%;
        }

        #elem2 {
            background-color: yellow;
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<div id="container">
    <div id="elem1"></div>
    <div id="elem2"></div>
</div>

Problem is that the yellow div goes on to the next line because I added a padding to the first div. I am hoping that the container is able to wrap around whatever is inside it, but this doesn't seem to be working. Any thoughts on how I can achieve what I need?

Upvotes: 1

Views: 93

Answers (4)

Martijn
Martijn

Reputation: 16103

Updating my complete answer, topic starter whats a margin between the both:

http://jsfiddle.net/8XKAR/2/

#elem1 {
    background-color: green;
    width: 48%; /* 2% less */
    height: 100%;
    float: left;
    margin-right: 2%; /* you want margin instead of padding */
}

Another solution would be making #elem1 and #elem2 with 49% so they both give 1%, that way the margin will be centered

A final option is the boxing-model, an option which I dont prefer when there is an easy alternative. This is my personal opinion, but in my experience i've needed that exactly once.

#elem1 {
    box-sizing:border-box;
    margin-right: 2%; /*padding instead of margin */

}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240988

There is a little hack where you can add box-sizing:border-box, therefore the padding doesn't effect the width of the element.

jsbin demo

#elem1 {
    box-sizing:border-box
}

Adding this, will cause both divs to render on the same line, as you wanted.

If you want to avoid this, either change the width on the parent, or the child element itself.

#elem1 {
    width: 48%;
    padding-right: 2%;
}

jsbin demo

Upvotes: 1

vishalkin
vishalkin

Reputation: 1235

link: http://jsbin.com/iheNOvo/7/edit

#elem1 {
        width: 48%;
        padding-right: 2%;
}

Upvotes: 0

Donovan Charpin
Donovan Charpin

Reputation: 3397

if you add a padding, you need to shrink your div to have 100%.

#elem1 {
    background-color: green;
    width: 48%;
    height: 100%;
    float: left;
    padding-right: 2%;
}

Upvotes: 0

Related Questions