Problems when defining width in div, tab system

Question

Guys I created a simple tab system, using css,html and jquey. However I’m having a problem defining the width flaps.

To make it easier to explain I’ll post the code here:

function corrige_altura() {
    $('.tabs-container').css({
      height: $('.tabs:checked + label + div').height() + 80  
  });

}

$(function(){
    corrige_altura();
});

/* Container das ABAS */
.tabs-container {
    position: relative;
    top: 3px;
}
/* ABAS */
input.tabs {
    display: none;
}
input.tabs + label + div {
    width: 100%;
    opacity: 0;
    position: absolute;
    border: 1px solid #d7d7d7;
    top: 40px;
    left: 0;
    padding: 25px 10px 25px 10px;
}
input.tabs + label + div {
    z-index: -1;
}
input.tabs:checked + label + div {
    opacity: 1;
    z-index: 1;
}
/* Labels */
input.tabs + label {
    line-height: 40px;
    padding: 0 20px;
    float: left;
    background: #484848;
    color: #ffffff;
    cursor: pointer;
    margin-right: 1px;
}
input.tabs + label:hover {
    color: #ffffff;
    background: #fff;
}
input.tabs:checked + label {
    color: #000;
    background: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table width="100%">
 <td width="50px" bgcolor="#E6E6FA">&nbsp;</td>
  <td>
    
    <div class="tabs-container">

    <!-- ABA 1 -->
    <input type="radio" name="tabs" class="tabs" id="tab1" checked>
    <label for="tab1">aba1</label>
    <div>

       asdasdasd


    </div>

    <!-- ABA 2 -->
    <input type="radio" name="tabs" class="tabs" id="tab2" >
    <label for="tab2">aba2</label>
    <div>

      sadsad

    </div>

</div>
    
    
  </td>
 <td width="50px" bgcolor="#E6E6FA">&nbsp;</td>
</table>

Good to note that when defining:

input.tabs + label + div {width: 100%;}

The tabs are superimposing the table where it is, I want it to be 100% of the screen. But respecting the table where it is.

If anyone can help me I’d be very grateful.

Answer 1

Friend, this is due to padding

change the passage to

    input.tabs + label + div {
    width: 100%;
    padding:0px;
    opacity: 0;
    position: absolute;
    border: 1px solid #d7d7d7;
    top: 40px;
    left: 0;
    padding: 25px 0px 25px 0px;
}

thus keeping the padding height and taking only the width

Visualize in

jsfiddle

Remarks

Margin

The margin property simply adds a margin to its element. You can use any Css measure (px, pt, in, %...) as the size of the margin property, plus you can assign negative values, but be careful with them.

Padding

The padding has a very similar operation to the margin, but instead of giving an external spacing, it gives an internal.

Observation taken from devmedia