Combine divs with percentage width with margin in pixels

6
votes

I have a page with multiple items, which have a 33.33% width to fill up the complete width of the page. However, I want to add a 20px margin between the items (both vertically and horizontally, but vertically is the problem here), but just adding a 20px margin on the right of each 1st and 2nd item in a row, destroys the complete page. (remove the commented-out CSS from the fiddle to see what I mean).

JSfiddle

Now, the question: How do I add a 20px margin and make sure all .item divs keep the same size? I could play with the percentage of the width and adding the removed width of an .item as a margin, but this would never be a steady 20px, since, well, it's percentages.

HTML

<div id="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
</div>

CSS

#main .item {
    height: 100px;
    width:33.33%;
    float:left;
    text-align: center;
}
#main .item:nth-child(3n+1) {
    background: red;
}
#main .item:nth-child(3n+3) {
    background: yellow;
}
#main .item:nth-child(3n+2) {
    background:lightblue;
}
/*.item:nth-child(3n+1), .item:nth-child(3n+2) {
    margin-right: 20px !important;
}*/
3
htmlcss
instead of using margin use padding instead. Also make sure you're using box-sizing: border-box on ALL elements. – Rob Scott
@RobScott Could you explain to me why I should add box-sizing? I have never seen that before. Edit: Okay, box-sizing is smart, thanks, very useful for future reference as well. Padding is not an option in my case. – Rvervuurt
jsfiddle.net/3856h9e2 Is this your desired result? – Tushar
@TusharGupta Yes, that is EXACTLY what I need, thanks! If you add it as an answer, I'll accept it. – Rvervuurt
@Rvervuurt box-sizing makes it so when you define width it adds into account margin, padding, and borders. w/o it, your widths aren't really what you'd expect them to be – Rob Scott

3 Answers

12
votes

You could use calc() to subtract the 20px from 33.33%.

In this case, you would use width: calc(33.33% - 20px) to displace the margins.

Updated Example

#main .item:nth-child(3n+1),
#main .item:nth-child(3n+2) {
    width: calc(33.33% - 20px);
    margin-right: 20px;
}

Unfortunately, this will result in elements of differing widths (since the 20px isn't being subtracted from all the elements). A better solution would be to subtract 13.33px from all the elements (40px/3px):

Updated Example

#main .item {
    height: 100px;
    width: calc(33.33% - 13.33px);
    float:left;
    text-align: center;
}
1
votes

Change the width of each .item class and calculate it using the calc()

#main .item {
    height: 100px;
    width:calc(33.33% - 20px);
    float:left;
    text-align: center;
}

Fiddle

0
votes

You can use % for wrapper and change margin to padding while using box-sizing: border-box

.wrapper {
  /* enable to add padding to width */
  box-sizing: border-box;
  width: 33.33%;
  float: left;
  padding: 20px;
  background-color: #EFEFEF;
}
.item {
  background-color: #ddd;
  padding: 5px;
}
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>