The CSS float property controls the positioning and formatting of content on the page. It positions an element on the right or left side of the container, letting text and other inline elements to wrap around it.
The float property uses the block layout, hence it adjusts the computed value of the display property in certain cases:
| Specified value | Computed value |
|---|---|
| inline | block |
| inline-block | block |
| inline-table | table |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-caption | block |
| table-header-group | block |
| table-footer-group | block |
| inline-flex | flex |
| inline-grid | grid |
This chapter discusses how to use float property.
Possible Values
Following are all possible values that can be used for property float:
- none: The element does not float. This is the default value.
- left: The element floats to the left of its container..
- right: The element floats to the right of its container.
- inline-start: The element floats to the start side of its containing block. (For ltr scripts its left side, and the right side for rtl scripts).
- inline-end: The element floats to the end side of its containing block. (For ltr scripts its right side, and the left side for rtl scripts).
Values inline-start and inline-end are supported only by Firefox and Safari browsers.
Applies to
All elements, but has no effect if the value of display is none.
Syntax
float = left | right | inline-start | inline-end | none
We can’t float elements to the center, top, or bottom of a container — only left or right float can be done.
Following example demonstrates usage of float property with its values:
<html><head><style>
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: cyan;
}
.inherit{
float: inherit;
background: pink;
}
</style></head><body><div class="left">1</div><div class="right">2
<div class="inherit">3</div></div><p>There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration insome form, by injected humour,
or randomised words which don't look even slightly believable.
</p></body></html>CSS Float – Equal Width Columns
We can create a two-columns layout with equal widths where two grid boxes are floated on the right side of a container using the float: right property.
Here is an example −
<html><head><style>
.grid-box {
float: right;
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style></head><body><h4>The first red color grid box is placed on the right side.</h3><div class="grid-container"><div class="grid-box" style="background-color:#f0610e;"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p></div><div class="grid-box" style="background-color:#86f00e;"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p></div></div></body></html>CSS Float – Equal Height Columns
Create a simple two-columns layout with equal height where two grid boxes are floated on the left side of a container using the float: left property.
Here is an example −
<html><head><style>
.grid-box {
float: left;
width: 50%;
height: 200px;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style></head><body><h4>The first red color grid box is placed on the left side.</h3><div class="grid-container"><div class="grid-box" style="background-color:#f0610e;"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p></div><div class="grid-box" style="background-color:#86f00e;"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p></div></div></body></html>CSS Float – Images Next To Each Other
A simple four-column images layout can be created using floating elements. The float: right property positions an image to the right within the container.
Here is an example −
<html><head><style>
.grid-box {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style></head><body><h4>The first image is placed on the right side, while the rest of the images are also right aligned within the
container.</h4><div class="grid-container"><div class="grid-box"><img class="tutimg" src="images/orange-flower.jpg" width="100%" height="50%" /><p>Orange color flower</p></div><div class="grid-box"><img class="tutimg" src="images/see.jpg" width="100%" height="50%" /><p>see</p></div><div class="grid-box"><img class="tutimg" src="images/tree.jpg" width="100%" height="50%" /><p>Tree</p></div><div class="grid-box"><img class="tutimg" src="images/red-flower.jpg" width="100%" height="50%" /><p>Red color flower</p></div></div></body></html>CSS Float – Flexible Boxes
To create a two-column layout within a flexible container, you can use the display: flex property to make the container a flex container, and the flex-nowrap property ensures that the flex items remain in a single row even if the viewport width is reduced.
Here is an example −
<html><head><style>
.grid-container {
display: flex;
flex-wrap: nowrap;
background-color: #f0610e;
}
.grid-box {
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
background-color: #86f00e;
margin: 15px;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style></head><body><h4>Resize the browser window to see the effect.</h3><div class="grid-container"><div class="grid-box"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable.</p></div><div class="grid-box"><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p></div></div></body></html>CSS Float – Navigation Menu
You can use the float property to create a horizontal menu with a list of hyperlinks. The menu links float on the right of the page using float: right property.
Here is an example −
<html><head><style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
</style></head><body><ul><li><a href="#tutorials" class="active-link">Tutorialspoint</a></li><li><a href="#home">Home</a></li><li><a href="#articles">Articles</a></li><li><a href="#courses">Courses</a></li><li><a href="#about">About</a></li></ul></body></html>CSS Float – Web Layout
You can also floats the contents of a website layout using float property.
In the following example, we can float the navigation menu to the right side of the page, buttons to the left or right side, and an image to the right side.
Here is an example −
<html><head><style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
margin: 5px;
padding: 0;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
.grid-container {
display: flex;
flex-wrap: nowrap;
}
.grid-box {
width: 100%;
height: 400px;
padding: 50px;
box-sizing: border-box;
text-align: center;
margin: 5px;
background-color: #f0ac0e;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
.btn1 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: right;
margin: 10px;
}
.btn2 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: left;
margin: 10px;
}
.image-container {
background-color: #f00ed2;
padding: 10px;
margin: 5px;
}
.images {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.image-container::after {
content: "";
clear: both;
display: table;
}
.footer {
padding: 20px;
text-align: center;
background: #67a482;
}
</style></head><body><div><ul><li><a href="#tutorials" class="active-link">Tutorialspoint</a></li><li><a href="#home">Home</a></li><li><a href="#articles">Articles</a></li><li><a href="#courses">Courses</a></li><li><a href="#about">About</a></li></ul></div><div class="grid-container"><div class="grid-box"><h1>Tutorialspoint</h1><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable. There
are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p><button class="btn1">HTML</button><button class="btn1">CSS</button><button class="btn2">Bootstrap</button><button class="btn2">React</button></div></div><div class="image-container"><div class="images"><img class="tutimg" src="images/orange-flower.jpg" width="100%" height="30%" /></div><div class="images"><img class="tutimg" src="images/see.jpg" width="100%" height="30%" /></div><div class="images"><img class="tutimg" src="images/tree.jpg" width="100%" height="30%" /></div><div class="images"><img class="tutimg" src="images/red-flower.jpg" width="100%" height="30%" /></div></div><div class="footer"><h3>© 2023 Tutorialspoint</h3></div></body></html>CSS Float – Paragraph
You can float a paragraph within a container, and the other elements in the container will wrap around it.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
font-size: large;
}
p {
float: right;
width: 150px;
height: 50px;
margin: 0 1em 1em;
padding: 5px;
text-align: center;
border: 2px solid #000000;
background-color: #f0610e;
}
</style></head><body><div>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum. <p>Tutorialspoint <br>CSS Float</p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</div></body></html>CSS Float – Images With Margin
Float images within a container by setting float and margin property, and the other elements in container will wrap around it.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: left;
border: 3px solid #f0610e;
margin: 10px;
width: 150px;
height: 80px;
}
</style></head><body><div><p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</p><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
</p></div></body></html>CSS Float – No Floating
To prevent an image from floating , you can set the float property to none value.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
</style></head><body><div><p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
oftext.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.making this the first true generator on the Internet of text.
<img class="tutimg" src="images/tutimg.png" />
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.
</p></div></body></html>CSS Float – Floating To Left or Right
It is possible to float images to the left and right within a div and have padding and margin on them.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 10px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
</style></head><body><div><p><img class="tutimg1" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making
this the first true generator on the Internet of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.<img class="tutimg2" src="images/tutimg.png" />repeat
predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.first true generator on the Internet of text.
</p></div></body></html>CSS Float – Images Overlapping
We can overlap floating images by adjusting their margin. To overlap two floating images, you can set the margin of one of the images to a negative value.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-left: -5px;
margin-right: 5px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
</style></head><body><div><p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.<img class="tutimg2" src="images/tutimg.png" />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. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable English.<img class="tutimg3" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.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.
</p></div></body></html>CSS Float – Images Not Adjacent
The first image is placed at the left edge of the container, and the second image is placed to the right of the first image, but not overlapping it.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
width: 600px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 320;
height: 150px;
margin-right: 5px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 320px;
height: 150px;
margin-left: 5px;
}
</style></head><body><div><p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. <img class="tutimg2" src="images/tutimg.png" />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. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p></div></body></html>CSS Float – Float Below Their Predecessors
We can make an image float below its predecessor by setting the margin of the image to a negative value.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-right: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 200px;
height: 80px;
margin-top: -5px;
margin-right: 5px;
}
.tutimg3 {
float: right;
border: 3px solid #f0610e;
width: 100px;
height: 120px;
margin: 5px;
}
</style></head><body><div><p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.<img class="tutimg1" src="images/tutimg.png" />you need to be sure there isn't anything embarrassing
hidden in the middle. All the Lorem Ip generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making this the first true generator on the Internet of
text.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. <img class="tutimg2" src="images/tutimg.png" /><img class="tutimg3" src="images/tutimg.png" />
All the Lorem Ipsum 2enerators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.Contrary
to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
</p></div></body></html>CSS Float – To a New Line
If there is not enough space for all of the floats on the current line, the remaining floats will be pushed to the next line.
Here is an example −
<html><head><style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
width: 40%;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 100px;
height: 60px;
}
.tutimg4 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
</style></head><body><div><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
this the first true genera tor on the Internet of text. making this the first true generator on the Internet of
going to use a passage of Lorem Ipsum.don't look even slightly believable. sure there isn't anything
<img class="tutimg1" src="images/tutimg.png" /><img class="tutimg1" src="images/tutimg.png" /><img class="tutimg2" src="images/tutimg.png" /><img class="tutimg3" src="images/tutimg.png" /><img
class="tutimg1" src="images/tutimg.png" />tor on the Internet of text. making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.
</p></div></body></html>CSS Float – Related Values
Some of the examples of the float are as follows:
Leave a Reply