0

I have the following Code, where I am trying to remove the overlapping border from the right and bottom of the div. Please help

HTML

<div class="lc">
  <ol>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ol>  
</div>

CSS

.lc:after, .lc:before {
  display : table;
  content : "";
}

.lc:after {
  clear :both;
}

.lc {
  border: 1px solid #000;
  padding-right : -1px;
}
ol li {
  list-style : none;
  display : block;
  box-sizing : border-box;
  border-right : 1px solid #000;
  border-bottom : 1px solid #000;
  float :left;
  width : 10%;
  padding : 20px;

}

ol {
  margin :0;
  padding : 0;

}

I do not want to use table layout to accomplish this. I tried with all permutation and combination of border adjust but no result.

2 Answers 2

0

/* you can use this method i have removed the border from 
.lc class and added a pseudo element for ol with the now the border 
is over the border of li*/

.lc:after,
.lc:before {
  display: table;
  content: "";
}
.lc:after {
  clear: both;
}
.lc {} ol li {
  list-style: none;
  display: block;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  float: left;
  width: 10%;
  padding: 20px;
  border-right: 1px solid #000;
}
/* added float left to clear float of children 
and position relative for the pseudo element
*/
ol {
  position: relative;
  float: left;
}
/* below is the pseudo element*/
ol:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border: 1px solid #000;
}
ol {
  margin: 0;
  padding: 0;
}
<div class="lc">
  <ol>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ol>
</div>

2
  • Thank you very much. Works Fine Now..
    – Soumya
    Nov 28, 2015 at 15:53
  • your welcome :) was happy to help please accept the answer Nov 28, 2015 at 15:55
0

Change your class

.lc {
     border-top: 1px solid #000;
     border-left: 1px solid #000;
    padding-right : -1px;
   }

Hope it helps

2
  • Padding doesn't accept a negative value.
    – Alex
    Nov 28, 2015 at 15:32
  • Doing this removes whole bottom border which is clearly visible at bottom right. I need the border bottom.
    – Soumya
    Nov 28, 2015 at 15:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.