Whenever I apply float or inline-block to elements, I notice that their margin or padding appears to be doubled. For example, the margin between the middle and bottom sections is set to 5%. However, the size of the top section is also 5%, but it is only half the height of the bottom section.
While experimenting on JSFiddle and resizing the window, I observed that the height of the top section does not scale proportionally to the width of the window, whereas the vertical margin does.
If you have any solutions or explanations for this behavior, I would greatly appreciate it.
html {
overflow-y: scroll;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
div {
outline: black solid 1px;
}
.top {
position: fixed;
width: 100%;
height: 5%;
}
.section {
float: left;
width: 20%;
height: 100%;
}
.left {
float: left;
vertical-align: top;
width: 25%;
margin: 5% 0px;
}
.left1 {
float: right;
width: 80%;
}
.left2 {
float: right;
width: 80%;
}
.right {
float: left;
vertical-align: top;
width: 75%;
margin: 5% 0px;
}
.right1 {
float: left;
vertical-align: top;
width: 66.66666%;
}
right2 {
float: left;
vertical-align: top;
width: 33.33333%;
}
.right21 {
width: 80%;
}
.right22 {
width: 80%;
}
.bottom {
width: 100%;
}<div class="top">
<div class="section">top section 1
</div>
<div class="section">top section 2
</div>
<div class="section">top section 3
</div>
<div class="section">top section 4
</div>
<div class="section">top section 5</div>
</div>
<div class="left">
<div class="left1">left 1
</div>
<div class="left2">left 2</div>
</div>
<div class="right">
<div class="right1">right 1
</div>
<div class="right2">
<div class="right21">right 2 1
</div>
<div class="right22">right 2 2</div>
</div>
</div>
<div class="bottom">
bottom
</div>JSFiddle: