html - Why is float and padding combo causing element to push thru margin? -

i have footer has 3 rows. row 1 2 divs floated left. row 2 'divider' line 100 width of footer. row 3 three more divs floated left.

the problem on first row. have margin-top:40px; middle line. first floated element sits on top should second floated element ( going text box , has padding inside ) sits on top fine without padding, when put 10px padding in, sits 40px above should, adds margin elements around it.

.footer {    background-color: #172135;    padding: 40px;  }  .footer-links {    margin: 0px auto 0px auto;    float: left;  }  .middle-line {    width: 100%;    border: 1px solid #1889b4;    padding: 0;    margin-top: 40px;  }  .newsletter {    padding: 10px;    border: 1px solid #188ab4;    width: 300px;    font-family: 'rbblack';    font-size: 12px;    color: white;    text-transform: uppercase;    float: left;  }

<footer class="footer clear" role="contentinfo">    <div class="footer-row-1 clear">      <div class="footer-links">       stuff      </div>      <div class="newsletter">        sign our newsletter      </div>    </div>    <div class="footer-row-2 clear">      <div class="middle-line"></div>    </div>    <div class="footer-row=3 clear">      more stuff    </div>  </footer>

**** please note ***** code snippet not accurate representation css reset , clearfix missing not correct. else edited , put there....

unless tell to, browser make element width specify, , then add on padding etc

if set border-sizing property prevent happening;

box-sizing: border-box; 

try adding css declaration