I noticed that when I remove the padding from the code below, two vertical divs become horizontal. This is confusing to me because I thought padding only affects internal spacing. I was expecting the two divs to be aligned horizontally.
<style>
#wrapper {
width:100%;
margin : 0;
}
#first-div {
width:50%;
margin : 0;
float : left ;
padding: 10px;
background-color: green;
color: white;
}
#second-div {
width:50%;
margin : 0;
float : left ;
background-color: blue;
color: white;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="first-div" >
First div content here...
</div>
<div id="second-div" >
Second div content here...
</div>
</div>