Float in CSS
Float in CSS
Float in CSS is a property that allows an element to be removed from the normal document flow and positioned to the left or right of its containing element. It is often used for creating layouts that include multiple columns or for positioning images within text.
Here’s an example of how to use float in CSS:
HTML:
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo vulputate tortor, non tincidunt enim rhoncus ut. Sed eget commodo augue. Suspendisse potenti. Sed at risus nisi.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="An image" data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" alt="An image"></noscript> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo vulputate tortor, non tincidunt enim rhoncus ut. Sed eget commodo augue. Suspendisse potenti. Sed at risus nisi.</p>
</div>
</div>Top of Form
CSS:
.container {
width: 800px;
margin: 0 auto;
}
.column {
width: 45%;
float: left;
margin: 2.5%;
background-color: #ccc;
padding: 20px;
}
In this example, we have a container element with a width of 800px and a margin of 0 auto to center it horizontally on the page. Within the container element, we have two columns, each with a width of 45% and a margin of 2.5% to create some space between them. The float property is set to left, which causes the columns to be positioned next to each other.
When you view this code in a web browser, you will see that the two columns are positioned next to each other with some space between them, and that the image in the second column is positioned to the left of the text.
It’s worth noting that when you use float in CSS, it can sometimes cause issues with the layout of other elements on the page. To avoid these issues, you can use clearfix or other techniques to clear the floats.