CSS - float Property

Previous
Next

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:

property value
none Set the float property to the none value.
left Set the float property to the left value.
right Set the float property to the right value.
inherit Set the float property to the inherit value.
intial Set the float property to the initial value.
Print Page
Previous
Next
Advertisements