CODEWITHSUNDEEP
htmlcss
Dawesign
Dawesign

Reputation: 753

padding within in a div

I simply can't figure this out: I have a div that is centered on screen with a width of 60%. Inside this div I have 3 more divs that float left with the width of 33% and have a gray bg color. The divs are filled with text and one image per div. Each div should now take 1/3 space inside the "maindiv". This works fine but as soon as I give my 3 "contentdivs" a padding so the text gets seperated a bit the third div wanders below the others. I also want a margin around my 3 divs so there is a gap between all the divs. But this only works if I give the divs a width of like 31%. As soon as I shrink my browser though, the third one pops up below the others again.

How it looks now: Current state

How it looks with a width of 33.33% enter image description here

How can fix this? I mean I set the divs to a relative width by setting the size in %. So the divs should just shrink as soon as I shrink my browser window. I tried to surround all the divs by other divs and messed around with margins and paddings but it just won't work.

Upvotes: 0

Views: 86

Answers (3)

isherwood
isherwood

Reputation: 61056

Apply box-sizing: border-box to all related elements (or the entire document, as Bootstrap does). http://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Then, rather than margin, use padding for the outer spacing. This eliminates the need to do mental math altogether.

div {
    box-sizing: border-box;
}
.one-third, .inner, .full-width {
    padding: 8px;
}
.one-third {
    float: left;
    width: 33.333%;
}
.inner {
    background-color: pink;
}
<div class="full-width">
    <div class="inner">Full-width div</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

Fiddle demo

Upvotes: 1

Adam Hughes
Adam Hughes

Reputation: 2277

Your best bet would be to get the three columns and margins to equal 100%. This is fairly easy if you know you are only having three columns:

.item {
    width:32%;
    margin-left:2%;
}
.item:first-child {
    margin-left:0;
}

As long as there is only three it will always add up to 100% as you are overriding the first .item. If you don't override the first item then you will have a space before your columns and the last column won't fit. Mixing pixels and percentages will give you issues in a grid (unless they're paddings and you are using box-sizing). Margin is not included in the box-sizing as it is not part of the main box model.

Upvotes: 0

dakab
dakab

Reputation: 5875

Most likely it’s box model’s fault. Paddings, margins and borders can be added together in different ways. Add box-sizing:border-box to the container and its elements. Most certainly this brings about what you intended to do, and width:33.3333% wil work out as expected.

Adding margin still breaks the item? There’s another great thing called calc(). Assumed you have a margin of 8px, that’s just a few pixels too much. With calc(), you can subtract the additional margin like this:

.item{ width:calc(33.3333vw - 8px); }

Note that there must be whitespace around the minus. Try it and include your margin.

Upvotes: 1

Related Questions