CSS float
Float, Position and LayersIn this lesson, we will learn how to place an HTML element left or right of its container element using the CSS float property.
CSS float Property
The CSS float property is used to position an element to the left or right of its container element. It is commonly used to wrap text around images and to create multi-column layouts. By floating elements side-by-side, you can achieve flexible and responsive website designs. The values of float property are:
- left: It will make an element float to the left of its containing element.
- right: It will make an element float to the right of its containing element.
- none: It will remove the float value from the floating element.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float left Example</title>
<!-- Internal CSS -->
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div id="d1">1st div</div>
<div id="d2">2nd div</div>
<div id="d3">3rd div</div>
</body>
</html>
To wrap text around an image using the float property see the example given below.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float image Example</title>
<!-- Internal CSS -->
<style>
img {
float: left;
margin-right: 5px;
}
</style>
</head>
<body>
<img src="butterfly-small.png">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>To create a two column paragraph using the float property see the example given below.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS float left Example</title>
<!-- Internal CSS -->
<style>
#p1 {
width: 47%;
float: left;
text-align: justify;
}
#p2 {
width: 47%;
float: right;
text-align: justify;
}
</style>
</head>
<body>
<p id="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>To create a three equal column layout using the float property see the example given below.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Three Equal Columns Layout Example</title>
<!-- Internal CSS -->
<style>
* {
box-sizing: border-box;
}
#d1 {
width: 33.33%;
height: 200px;
padding: 15px;
background-color: red;
float: left;
}
#d2 {
width: 33.33%;
height: 200px;
padding: 15px;
background-color: yellow;
float: left;
}
#d3 {
width: 33.33%;
height: 200px;
padding: 15px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">1st Column</div>
<div id="d2">2nd Column</div>
<div id="d3">3rd Column</div>
</div>
</body>
</html>CSS clear Property
The CSS clear property is used to control how an element behaves in relation to floated elements that appear before it in the HTML structure. It is commonly used when you have floated elements, such as images or divs, within a container, and you want to ensure that subsequent content flows below those floated elements correctly.
The values of clear property are:
- left: If you set clear: left; on an element, it will move below the element floating on the left side.
- right: If you set clear: right; on an element, it will move below the element floating on the right side.
- both: If you set clear: both;, the element will clear both left and right floated elements, making sure it doesn't appear beside or overlap any floated elements, regardless of their positioning.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS clear: left Example</title>
<!-- Internal CSS -->
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: yellow;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">1st div</div>
<div id="d2">2nd div</div>
</div>
</body>
</html>