CSS - Float

The CSS float property controls the positioning and formatting of content on the page. It can be used to wrap text around images, or wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.

CSS provides following possible values for float property to control the flow of an element on the web page.

  • 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.

  • inherit: The element inherits the float value of its parent.

  • initial: The element floats to its default value.

We can not float elements to the center, top, or bottom of a container — only left or right float can be done.

CSS Float - Demo

Try to select different values for CSS float property and see the result in right box.

CSS Float Example

Following example demonstrates usage of float property with its values:

<html>
<head>
<style>
   div {
      padding: 10px;
      width: 150px;
      height: 150px;
   }
   .left {
      float: left;
      background: yellow;
   }
   .right {
      float: right;
      background: cyan;
   }
</style>
</head>
<body>
   <div class="left">Left Floating Text</div>
   <div class="right">Right Floating Text</div>
</body>
</html>

CSS Float - Three Column Layout

We can use float: right property to create three column layout for a web page. Following is an example to create three column layout. You can adjust the width of the column based on your requirements.

Example

Here is an example −

<html>
<head>
<style>
   .grid-box {
      float: right;
      width: 33.333%;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
   }
   .grid-container::after {
      content: "";
      clear: both;
      display: table;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-box" style="background-color:#f0610e;">
         <p>This is red box</p>
      </div>
      <div class="grid-box" style="background-color:#86f00e;">
         <p>This is green box</p>
      </div>
      <div class="grid-box" style="background-color:#aaaaaa;">
         <p>This is green box</p>
      </div>
   </div>
</body>
</html>

CSS Float Example - 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.

Example

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>Images Next To Each Other</h4>
   <div class="grid-container">
      <div class="grid-box">
         <img class="img" src="images/orange-flower.jpg" style="width:100%; height:50%"/>
         <p>Orange color flower</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/sea.jpg" style="width:100%; height:50%"/>
         <p>Sea View</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/tree.jpg" style="width:100%; height:50%"/>
         <p>Tree View</p>
      </div>
      <div class="grid-box">
         <img class="img" src="images/red-flower.jpg" style="width:100%; height:50%"/>
         <p>Red color flower</p>
      </div>
   </div>
</body>
</html>

CSS Float Example - 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.

Example

Here is an example. You can try this example by changing its different parameters −

<html>
<head>
<style>
   .grid-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: #eeeeee;
   }
   .grid-box {
      width: 50%;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
      background-color: #40a944;
      margin: 15px;
   }
   .grid-container::after {
      content: "";
      clear: both;
      display: table;
   }
</style>
</head>
<body>
   <h4>Resize the browser window to see the effect.</h4>
   <div class="grid-container">
      <div class="grid-box">
         <p>Box One</p>
      </div>
      <div class="grid-box">
         <p>Box Two</p>
      </div>
   </div>
</body>
</html>

CSS Float Example - 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.

Example

Here is an example. You can try this example by changing its different parameters −

<html>
<head>
<style>
   ul {
      overflow: hidden;
      background-color: #eeeeee;
      list-style-type: none;
   }
   li {
      float: right;
   }
   li a {
      display: block;
      color: #000000;
      padding: 15px;
      text-decoration: none;
   }
   .active-link {
      background-color: #40a944;
   }
</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 Example - Paragraph

You can float a paragraph within a container, where the other elements in the container will wrap around it which will give a magazine and new paper look to your content.

Example

Here is an example. You can try this example by changing its different parameters −

<html>
<head>
<style>
   div {
      border: 2px solid #1b1b1b;
      padding: 5px;
      font-size: 18px;
   }
   span {
      float: right;
      width: 120px;
      margin: 0.5em;
      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  <span>Tutorialspoint <br>CSS Float</span> randomised words which 
      don't look even slightly believable. If you are going to use a passage of Lorem Ipsum.  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. This will need little more effort to become expert 
      in Casecading Style Sheet.
      </div>
</body>
</html>

CSS Float Example - Floating To Left or Right

It is possible to float images to the left and right within a div and have padding and margin around these images to give them a magazine and news paper look.

Example

Here is an example. You can try this example by changing its different parameters −

<html>
<head>
<style>
   div {
      border: 2px solid #1b1b1b;
      padding: 20px;
      margin: 10px;
  }
   .left {
      float: left;
      border: 3px solid #f0610e;
      width: 150px;
      height: 80px;
      margin: 5px;
   }
   .right {
      float: right;
      border: 3px solid #f0610e;
      width: 150px;
      height: 80px;
      margin: 5px;
   }
</style>
</head>
<body>
   <div>
      <p> <img class="left" src="images/orange-flower.jpg" />
      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.</p>

      <p> <img class="right" src="images/orange-flower.jpg" />
      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.</p>

   </div>
</body>
</html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements