How to float content in HTML with CSS

• Bloggen
• >
• CSS tutorials
• >
• How to float content in HTML with CSS

Introduction

Floating content in HTML with CSS allows you to move an element to the left or right of its parent container. This is useful for creating layouts with multiple columns, or to position images or text around other elements on the page.

Syntax

The float property is used in CSS to float an element to the left or right. The syntax is as follows:

		.selector {
			float: left/right;
		}

“Selector” refers to the HTML element you want to float. You can specify “left” or “right” for the float value.

Usage Examples

Consider the following HTML code:

		<div class="container">
			<div class="left-column">
				<h3>This is the left column</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam turpis nec diam fringilla blandit. Nunc aliquet, enim eget consectetur sodales, purus neque gravida urna, id semper ante lectus a libero.</p>
			</div>
			<div class="right-column">
				<h3>This is the right column</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam turpis nec diam fringilla blandit. Nunc aliquet, enim eget consectetur sodales, purus neque gravida urna, id semper ante lectus a libero.</p>
			</div>
		</div>

This code creates a container with two columns, a left column and a right column. To float the left column to the left and the right column to the right, we can use the following CSS:

		.left-column {
			float: left;
			width: 50%;
		}
		
		.right-column {
			float: right;
			width: 50%;
		}

The “width” property is used to specify the width of each column, in this case 50% each so that they take up equal amounts of space in the container.

For more in-depth information and advanced techniques for floating content in HTML with CSS, check out the following resource: W3Schools CSS float property.

  Written by: Steven Iversen     04-06-2023     Written in: CSS tutorials