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

Question

I have a footer that has three rows. Row one is two divs floated left. Row two is a 'divider' line that is 100 width of the footer. Row three will be 3 more divs floated left.
The problem is on the first row. I have a margin-top:40px; for the middle line. The first floated element sits on top as it should but the second floated element ( which is going to be a text box and has padding inside ) sits on top fine WITHOUT padding, but when I put the 10px padding in, it sits 40px above as it should, but adds extra margin to the 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 Up For 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 ***** The code snippet is not an accurate representation as css reset and clearfix is missing so not correct. Someone else edited this and put it there....

Answer 1

Unless you tell it to, the browser will make the element the width you specify, and then add on the padding etc
If you set the border-sizing property this will prevent it from happening;
box-sizing: border-box;
Try adding that to your CSS declaration

Answer 2

You can compensate for the shifting by of the padding by adding either margin-top:-10px; or position: relative; top: -10px; to .newsletter.
.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;
margin-top: -10px; /* negative or padding value - readjusts position back up */
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 Up For 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>

Answer 3

After reviewing what you said about my old, now competently irrelevant answer, i think i found what your issue is.
padding:10px;
adds padding to ALL 4 sides. it is functionally equivalent to
padding: 10px 10px 10px 10px;
the newsletter div is now significantly Taller than the other stuff in the same div, and the browser is forced to compensate by making the container div bigger. the container div gains 20 pixels in height when you do this, which would appear to add additional margin to the other elements.
to remove this, you would instead want to use either of these
padding: 0 10px;
padding: 0 10px 0 10px;
as per http://www.w3schools.com/cssref/pr_padding.asp
either will add padding to the LEFT and RIGHT sides equal to 10px, but the top and bottom will remain 0. the newsletter div will no longer be over-sized, making the container div bigger, which will make it appear there is margin for the others.
Edit (additional options):
however, if you want to keep the top and bottom padding, your have 3 main options.
1) add the padding to the other div inside the parent as well as newsletter. they will line up with newsletter, and have the extra space above and below. you would likely want to shrink the middle div's height to compensate for the increase.
2) to completely remove the newsletter from its parent div. set the width of newsletter and its parent div so that they add up to 100% including padding and borders, or use box-sizing:border box, and float both left so that they line up horizontally. now you can make newsletter as big as you want, and it will not affect the others.
3) you fix the height of the parent div,so that newsletter can be bigger than its parent div, however this tends to cause problems with layouts if your not careful, as it may overlap.