CODEWITHSUNDEEP
htmlcss
Rvervuurt
Rvervuurt

Reputation: 8961

Combine divs with percentage width with margin in pixels

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;
}*/

Upvotes: 6

Views: 4370

Answers (3)

Tushar Gupta
Tushar Gupta

Reputation: 15933

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

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241208

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;
}

Upvotes: 13

Justinas
Justinas

Reputation: 43557

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>

Upvotes: 0

Related Questions