Float one div around another CSS
| Task | |
| Solution with float | |
| Stop float | |
| Solution with Grid | |
| Related Articles |
Task
You need one block to the left of the other, and when the height of the block ends, The text of the second block should be below the first.
Solution with float
HTML
<div class="left_div1">
</div>
<div class="rigth_div1">
</div>
CSS
The most important thing is to specify the float:left property on the left block.
For clarity, I'll give you a property. background:lightblue; so that the background becomes light blue
And we'll give the right block a light green.
.left_div1 {
float:left;
width:40%;
background:lightblue;
}
.right_div1 {background:lightgreen;}
The result
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment,
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
We've got the result, but the blocks are too close together.
Add padding and margins.
HTML
<div class="left_div2">
</div>
<div class="rigth_div2">
</div>
CSS
.left_div2 {
float:left;
width:40%;
background:lightblue;
margin-right:15px;
padding:10px;
}
.right_div2 {
padding:10px;
background:lightgreen;
}
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment,
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
A practical example
Let's say I want to show you a review of a Stels Pilot 950 bike.
To do this, I plan to place the image with the bicycle in the left block and the text with the description in the right.
This is the cheapest line of full-size folding bicycles from the Russian bicycle manufacturer Stels.
Available in two versions: with a frame of 17.5 and 19 inches. And the bigger one. It was completely sold out in St. Petersburg by mid-July.
How the price has changed
The price of Stels Pilot 950 in the summer of 2018 was around 13,950 rubles in June and July and reached 15,500 by the end of summer.
At this mark, it remained in the fall, despite the beginning of the season of discounts and sales. A bicycle, even for some It was removed from production, but, apparently, due to its high popularity, it was returned.
At the end of the 2019 season, the price was 17,000 rubles.
Now the price is about 19000 rubles.
Check prices: > shop Velodrive BUY
Cross over. reference Read the full review and comparison with other folding bikes.
In a practical example, we no longer need to highlight the background, so remove it from the styles.
HTML
<div class="left_div3">
</div>
<div class="rigth_div3">
</div>
CSS
.left_div3 {
float:left;
width:40%;
margin-right:15px;
padding:10px;}
.right_div3 {
padding:10px;
}
The result
This is the cheapest line of full-size folding bicycles from the Russian bicycle manufacturer Stels.
Available in two versions: with a frame of 17.5 and 19 inches. And the bigger one. It was completely sold out in St. Petersburg by mid-July.
How the price has changed
The price of Stels Pilot 950 in the summer of 2018 was around 13,950 rubles in June and July and reached 15,500 by the end of summer.
At this mark, it remained in the fall, despite the beginning of the season of discounts and sales. A bicycle, even for some It was removed from production, but, apparently, due to its high popularity, it was returned.
At the end of the 2019 season, the price was 17,000 rubles.
Now the price is about 19000 rubles.
Check prices: > shop Velodrive BUY
Cross over. reference Read the full review and comparison with other folding bikes.
Stop the flow
Enough where you want to stop flowing to place an element, such as div or br
It is a class that contains clear:both.
For example:
HTML
<div class="clearBoth"></div>
CSS
.clearBoth {
clear: both;
}
CSS Grid
A more advanced option is the use of CSS Grid - a grille on which you can place any number of
blocks.
However, this is not a complete analogue, but rather another way to solve similar problems, which is not applicable everywhere.
.gridBox > div {
padding: .1rem;
}
.gridBox {
display: grid;
grid-template-columns: repeat(1fr, 2fr);
grid-gap: 3px;
grid-auto-rows: minmax(100px, auto)
}
.gridBox--one,
.gridBox--three
{
max-width:260px;}
.gridBox--one {
grid-column: 1;
grid-row: 1;
}
.gridBox--two {
min-width:320px;
max-width:800px;
grid-column: 2;
grid-row: 1/3;
}
.gridBox--three {
grid-column: 1;
grid-row: 2;
}
@media screen and (max-width: 735px) {
.gridBox{width:100%}
.gridBox > div {
border: 0;
border-color: #502542;;
border-color: rgba(80, 37, 70, 0.3);
border-radius: 0;
padding: 0;}
.gridBox--one,
.gridBox--three
{
min-width:180px;
max-width:100%;}
.gridBox--one {
grid-column: 1 ;
grid-row: 1;
}
.gridBox--two {
min-width:180px;
width:100%;
grid-column: 1;
grid-row: 2;
}
.gridBox--three {
grid-column: 1;
grid-row: 3;
}
}
@media screen and (min-width: 1840px) {
.tcont caption {font-size:1.5rem;padding:1rem 0;text-align:left;}
.tcont td {font-size:1.4rem;}
.tcont td a
{padding:1.2rem;}
}
@media screen and (max-width: 1840px) and (min-width: 1200px) {
.tcont caption {font-size:1.5rem;padding:1rem 0;text-align:left;}
.tcont td {font-size:1.4rem;}
.tcont td a
{padding:1.2rem;}
}
@media screen and (max-width: 1199px) and (min-width: 1000px) {
.tcont td a
{padding:1.2rem;}
.tcont caption {font-size:1.5rem;padding:1rem 0;}
}
@media screen and (max-width: 1000px) and (min-width: 800px) {
.tcont td a
{padding:1rem;}
.tcont caption {font-size:1.5rem;padding:1rem 0;}
}
@media screen and (max-width: 800px) and (min-width: 600px) {
.tcont td a
{padding:1.2rem;}
.tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;}
}
@media screen and (max-width: 600px) and (min-width: 360px) {
.tcont td a
{padding:1.2rem;}
.tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;}
}
@media screen and (max-width: 360px) and (min-width: 310px) {
.tcont td a
{padding:1.2rem;}
.tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;}
}
@media screen and (max-width: 310px) {
.tcont td a
{padding:1.2rem;}
.tcont caption
{font-size:1.5rem;padding:1rem 0;text-align:center;}
}
HTML
<div class="w100 mt3">
<div class="gridBox">
<div class="gridBox--one">
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
</div>
<div class="gridBox--two">
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2
</div>
<div class="gridBox--three">
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
3 3 3 3 3 3 3 3 3
</div>
</div>
</div>
The result
To understand how our grid works, change the screen resolution, for example. compress the browser window, or open on a mobile device.
Article author: Andrei Olegovich