floats with Guil Hernandez

To float two items side by side as he does in this video, you must take into consideration the margins and any borders applied to the child elements of a parent container. Then the rest is a bit of Math. For example:

Suppose we created a div container element with a class name of "wrapper" and two child div elements. The parent container element has a width size of 400px. And the two child elements with class name child inside have a size of 180px in width, with 5px margin on the left and right sides and a 1px border. It will look like this in CSS:

.wrapper{
max-width: 400px;
min-height: 12em;
}

.child{
width: 180px;                                     /*180px / 400px = 0.45 * 100 = 45% */
min-height: 10em;
margin-left: 4px;                             /* 4px /400px = 0.01 * 100 = 1% */
margin-right: 2px;                         /*2px /400px  = 0.005 * 100 = 0.5%*/
border: 1px solid black;               /*1px / 400px = 0.0025 * 100 = 0.25%*/
float: left;
}

By applying a margin to both child elements on their left and right sides, we have a total of 20px margin, because 5+5+5+5 = 20. And a 1px border for each child element = 1 + 1 = 2px in total, and therefore, the margins along with the border added together gives us 22px in total. The child elements now have total width of 180px + 180px + 22px = 382px, and the remaining space left in the parent container is 400 - 382 = 18px. Thus, you will be able to float these child elements side by side since they fit into the parent container.

He used percentages, so you can alternatively convert the child elements width, margin and border property values to a percentage by doing what has been shown above in the code commented out.

To learn more, please visit: https://developer.mozilla.org/en-US/docs/Web/CSS/float