Let's take a look at the grid design of the site and take a look at the individual components. Let's explore why float is so useful, as well as the popular technique of building the first web grid from three streams and a site footer.
To study the grid construction of a site, you need to understand what a "flow" is. Flow are the elements of the site, located one after another. For example, it can be div elements that are next to each other by default. But the flow can be rearranged, and the position of the block elements can be changed.
To control the flow, we use the float property, which can place the block on the left or right side. It is enough to write in the CSS file:
"class or block name" {float: right / left; }
The only drawback of float is the ability to "overlap" one block on top of another.
To avoid running over, we use clear: both - this property will set the flow around the block. We set the width and height, as maximum and minimum, so that the value is formed according to the size of the content (text, images). Margin - set the value to auto so that external margins are formed automatically depending on the location of the block.
Since float can place blocks in two directions, it is customary to divide the site into streams - left and right. If the programmer needs only two streams, then he leaves the left and right floats, but if there are more than two, then he adjusts the indents using the margin. How does this happen:
.column1 {float: left; width: 65px; min-height: 50px; margin-right: 9px; // 9px from center box}
2 stream:
.column2 {float: left; // to the left block, but without "overlapping", since we applied margin width: 80px; min-height: 50px; }
3 stream:
.column3 {float: right; width: 65px; min-height: 50px; }
Dealing with the footer (.footer):
.footer {clear: both; // wrap around both sides}
This is how we made a grid for the site using float, consisting of three streams.
