The float property and multiple blocks in CSS
Now let's say there is not one child div next to each other in the HTML code, but two, and both are given float with the value left. Let's see what happens:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
So, as we can see, two child blocks are lined up in a row, and the first block in the HTML code will be located on the left.
Let's now replace the value left with the value right. In this case, the blocks will float to the right, and their order will be reversed compared to the order in the HTML code:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
