How To Set Margin Between Columns With Width 33%?

May 03, 2024 Post a Comment

I think it was a lot of similar questions but I have not found a good solution. I have a container which contain 3 columns with width 33%. I want to add margin between them like as

Solution 1:

Obviously, the width of the columns must be less that 33% of the container since you are adding 20px margin in some instances. Unless 40px is exactly equal to 1% of the width, of course.

I suspect what you are after is the columns are of equal size after the margins are added...so 33% of the remaining width.

Flexbox can do that.

Flexbox Support is IE10 and up

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px0;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.column {
  flex: 1;
  height: 200px;
  background: #ccc;
  text-align: center;
}
.column:nth-child(2) {
  margin: 020px;
}

<divclass="container"><divclass="column">Column 1</div><divclass="column">Column 2</div><divclass="column">Column 3</div></div>

Calc Solution

Calc Support is IE9 and up

As mentioned in other answers, calc can be used to define the width of the columns taking into account the required margins.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px0;
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.column {
  float: left;
  height: 200px;
  background: #ccc;
  text-align: center;
  width: calc((100%-40px)/3);
}
.column:nth-child(2) {
  margin: 020px;
}

<divclass="container"><divclass="column">Column 1</div><divclass="column">Column 2</div><divclass="column">Column 3</div></div>

Solution 2:

You may use calc method on column's width:

.column{
   width: calc(33.33% - 20px);
   /* ------------------^^define margin vlaue*/
}

Before using calc method have a look in can i use calc.

But really, if I were coding, I wouldn't use it because I would simply decrease the width from 33.33% to something like 30%.

Solution 3:

buddy.. your 20% is not gonna work, coz it doesn't sums to 100%.! Still, if you want some equal margin, this is what you can get.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px0;
}
.column {
  width: 33%;
  float: left;
  height: 200px;
  background: #ccc;
  text-align: center;
}
.column+.column {
margin-left:0.33%;
}

<divclass="container"><divclass="column">Column 1</div><divclass="column">Column 2</div><divclass="column">Column 3</div></div>

Solution 4:

Here is the code, now as we want 3 equal columns arrange properly. so use 30.5% instead of 33% because of padding that will acquire rest of the space.

<html><head><style>.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px ;
}

.column {
    width: 30.5%;
    float: left;
    height: 200px;
    background: #ccc;
    text-align: center;
    margin-left: 20px;
}

.column:first-child {
    margin: 0;
}
</style></head><body><divclass="container"><divclass="column">Column 1</div><divclass="column">Column 2</div><divclass="column">Column 3</div></div></body></html>

Solution 5:

You can add an inner div into each column in order to control margins:

<html><head><style>.container {
    width: 500px;
    border:1px solid #ddd;
}

.column {
    width: 33.3%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
}
 .column__inner {
    background-color: #ddd;
    height: 200px;
  }


</style></head><body><divclass="container"><divclass="column"><divclass="column__inner">Column 1</div></div><divclass="column"><divclass="column__inner">Column 1</div></div><divclass="column"><divclass="column__inner">Column 1</div></div></div></body></html>

Html5 Programming Language