0

I have 3 li items - each with a width of 33.3%. Im trying to create a margin-right gap between each <li> - however the extra margin makes the total <li> width exceed 100% and break down on a new line.

Would I be able to sort this with some border-box approach? Tried to apply it globally, with no luck.

http://codepen.io/anon/pen/jbazaN

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 33.3%;
  margin: 0 20px 0 0;
  background: blue;
}
user1231561
  • 3,239
  • 6
  • 36
  • 55

2 Answers2

1

You need the Calc function 

ul li {
    float: left;
    width: calc(33.3% - 20px);/*add this*/
    margin: 0 20px 0 0;
    background: blue;
}

Here you are

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

think about adding prefix or using prefixfree from lea verou.

Update:

To remove the margin on every third list item inside in your unordered lists you will need the not and nth selectors ul li:not(:nth-child(3n+3))

ul li {
  float: left;
  width: 33.3%;
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0;}

live demo 

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

or write it and then overwrite it to avoid the not selector like this

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
ul li:nth-child(3n+3){margin: 0 0px 0 0}
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • Cheers - thats pretty cool - didnt know about calc. How would I go about not having margin-right on every third item? So margin right would only be apploed to the two first li's? – user1231561 Oct 18 '15 at 12:11
0

If you want to support old browsers like IE8 you can use this method by doing little math.

In your case you have 3 items and you need to add margin right 20px for first two items that's total 40px .

Now deduct this value from the container ( will be 660px ) then divide it on the number of items,

(660/3 = 220px) width for each item, final step we need to get the percentage of item width = new item width / old container width [ 220/700 = .314286 (31.429%) ].

And finally we well remove margin right from the last items by adding class to it or use this one

ul li + li + li { margin-right: 0 } because IE8 and lower doesn't support last-child selector

In the end your code would be :

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 0px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 31.429%;
  margin: 0 20px 0 0;
  background: blue;
}

ul li+li+li {
  margin-right:0
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

Reference: Alternative for nth , first child and last child for IE8 , Can i use

Community
  • 1
  • 1