CSS Layout - Float, Table, Flex

The CSS property float is used for defining a web page layout. Contents are aligned with each other using float property. Float can be used to make block elements too take up its defined width only and allow other elements to take up the remaining space. The float property can have any one of the following values.

1. left - The element floats to the left of its container
2. right- The element floats to the right of its container
3. none - The element does not float (default)
4. inherit - The element inherits the float value of its parent

CSS Float Example

---

Content Auto Aligned Without Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

Content Aligned Using Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

<p><img src="web-design.jpg" width="200" class="float-img"> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<style>
.float-img{
  float: left;
  margin-right: 5px;
}  
</style>

CSS Clear

The CSS property clear property specifies what elements can float beside the cleared element along with the side contents are allowed to float. Clear is most often used after an element is floated to prevent other floated elements take up the empty space on previous sections. The clear property forces floated elements that are added below the cleared element appear below it on the web page. The clear property can have any one of the following values.

1. none - Allows floating elements on both sides (default)
2. left - No floating elements allowed on the left side
3. right- No floating elements allowed on the right side
4. both - No floating elements allowed on either the left or the right side
5. inherit - The element inherits the clear value of its parent

CSS Float Without Clear

CSS Float With Clear

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box middle">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</div>
<div class="box last">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="clear"></div>
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.box{
  width: 30%;
  float: left;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
} 
.middle{
  margin-left: 5%;
} 
.last{
  float: right;
}
.clear{
  clear: both;
}
</style>

CSS Display - Table

Alternatively, you can use CSS property display with table value assigned on the wrapper container to prevent floating contents take up empty space available on previous sections instead of the CSS clear property.

The display table must be followed by the width value to define the total width to be covered by the wrapper container on the viewport to prevent it from wrapping the contents depending upon their content width only.

Moreover, display table with width 100% can make horizontal scrollbar appear on the viewport in case the borders or paddings are added to the wrapper. To include both borders and paddings on the total width of the container, you need to add CSS property box-sizing with value border-box.

CSS Layout with Display Table Example

<div class="wrapper">  
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="box middle">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
  </div>
  <div class="box last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur.</p>
  </div>
<</div>
<div class="wrapper">  
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<style>
.wrapper{
  display: table;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.box{
  width: 30%;
  float: left;
  padding: 15px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
} 
.middle{
  margin-left: 5%;
} 
.last{
  float: right;
}
</style>

CSS Layout - Contents with Equal Height

You learnt to create multiple boxes with equal width and align them properly in order to create a visually pleasing web page layout. But, it is not easy to create content boxes with equal height though. You can add CSS height property and set equal height to all of those containers but that can make those containers look equal in one viewport but the contents might not look good in other viewports.

.box{
  width: 30%;
  float: left;
  height: 300px;
} 

CSS property display: flex can be highly useful in such cases.

CSS Display - Flex

CSS property display flex is an easiest way of creating flexible containers that can help you create multiple content boxes within a viewport width with equal height. The width of the content holders are also equally distributed by default unless different widths are set using CSS. The CSS property display: flex does not support CSS float property, so, you will need to move contents to the left or right and create spaces between them using margins or paddings. CSS display property with flex value will automatically include borders and paddings in its total width and does not require box-sizing property to be defined and the total width will always be the 100% by default.

Creating Spaces Between Contents Within a Flex Container

<div class="box-wrapper-main">
<div class="img-box">
  <img src="web-design.jpg" width="100%">
  This is a content inside flex container.
</div>
<div class="img-box img-middle">
  <img src="web-code.jpg" width="100%">
  This is a content inside flex container with a little longer text.
</div>
<div class="img-box img-last">
  <img src="seo.jpg" width="100%">
  This is a content inside flex container with a little longer text.
</div>
</div>

<style>
.box-wrapper-main{
  display: flex;
}  
.img-box{
  width: 30%;
  background: #069;
  color: #fff;
  padding: 10px;
}
.img-middle, .img-last{
  margin-left: 5%;
}
</style>

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet