Alternative to box-sizing

Question

i have this box, and i want to make it responsive

    h2{
        margin: 0;
        padding: 0;
        border: 0;
    }

ul {
    background: #fff;
    float: left;
    padding: 15px 0;
    width: 655px;
    border: 1px solid #000;
    border-bottom: 0;
}
ul li {
    float: left;
    /*width: auto;*/
    text-align: center;
    width: 202px;
    padding: 0 8px;
    margin-bottom: 7px;
}
ul li .img{
    position: relative;
    border: 1px solid #000;
    /*padding: 10px;*/
    padding: 0;
    text-align: center;
}
.info {
    background: orange;
    border: 1px solid #000;
    padding: 0 6px 5px;
    border-width: 0 1px 2px 1px;
}

<ul>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
      <div class="info">
       <h2>contact us</h2>
      </div>
     </li>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
      <div class="info">
       <h2>contact us</h2>
      </div>
     </li>
   <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
    </ul>

I want to make ul 100% width and li centered with padding, but if add padding, li go outside of ul width. I don't want to use box-sizing

webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

is there any other method alternative to box-sizing to achieve this please?

thanks for reply, because it affect other stuff in some uniform css, i don't want to use it, i want to use without box-sizing, any method to achieve it? — Robert, Aug 12 '18 at 11:49
simply add it to the element you want not all of them ... because in all the case you will achieve the same effect but with more complex code — Temani Afif, Aug 12 '18 at 11:52
we need to have more code, we cannot help with the actual one ... but again all what you need is simply `ul {box-sizing:border-box}` :) or am pretty sure you are facing another issue that you think related to box-sizing — Temani Afif, Aug 12 '18 at 11:57
`li` has by default `width: 100%`. Why do you need to specify it? — Mosh Feu, Aug 12 '18 at 11:59
no i don't other issue, i just saw many sites without it and i don't want to use it too, because when i do, it affect other css like Fancybox photo in popup image go down.. so i prefer not using it, i know i can simply add box-sizing:content-box but i prefer not doing it for all my css.. everytime. — Robert, Aug 12 '18 at 12:00

score 1 · Answer 1 · answered Aug 12 '18 at 12:40

1

Simply remove useless properties and no need to use box-sizing

h2{
    margin: 0;
    padding: 0;
    border: 0;
}

ul {
    background: #fff;
    /*float: left;*/
    padding: 15px 0;
    /*width: 100%;*/
    border: 1px solid #000;
    border-bottom: 0;
}
ul li {
    /*float: left;*/
    /*width: auto;*/
    text-align: center;
    /*width: 100%;*/
    padding: 0 8px;
    margin-bottom: 7px;
}
ul li .img{
    position: relative;
    border: 1px solid #000;
    /*padding: 10px;*/
    padding: 0;
    text-align: center;
}
.info {
    background: orange;
    border: 1px solid #000;
    padding: 0 6px 5px;
    border-width: 0 1px 2px 1px;
}

<ul>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
</ul>

answered Aug 12 '18 at 12:40

Temani Afif

245,468
26
309
415

thanks, but i have 3 box per line, and works well in my first css, but when i try to make it responsive one box per line so i need width 100% and if i do so, li go outside of ul, any suggestions? thanks again! – Robert Aug 12 '18 at 12:47
@Robert as you can see in my code, you have one box per line and nothing outside ... so it's fine, what's the issue? – Temani Afif Aug 12 '18 at 12:56
post edited, run snippet again and here is the real issue, when i want to make this 3 box responsive, so i need to make li 100% one per line but if i did this, li go outside of ul, you understand? – Robert Aug 12 '18 at 13:07
@Robert you code is a different one and you have 3 box per line .. if you want 1 box per line then my code is fine, I still don't see the issue ... you have the good code for 3box per line and 1 box per line – Temani Afif Aug 12 '18 at 13:29
3 box per line works good, but if page resized for mobile i want to make it 1 box per line so i need width:100% for li but if i did this, li go outside of ul width..hope you undertand – Robert Aug 12 '18 at 13:33
@Robert again you don't need width:100% :) .. look at my code, I don't know how to make it more clear, but this is all what you need to have 1box per line, no need width:100% because it will create the issue – Temani Afif Aug 12 '18 at 13:38

Alternative to box-sizing

1 Answers1