• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / CSS Floats

CSS Floats

17 July 2006 / 15 Comments

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

The float property

Creating a floated element in CSS is very easy. We just use the float property – for example:


  <div style="float: left; width: 100px;">
    A left-floated div
  </div>

  <div style="float: right; width: 100px;">
    A right-floated div
  </div>

Or, using IDs and a separate style sheet:


<div id="leftFloat">A left-floated div</div>
<div id="rightFloat">A right-floated div</div>

.
.
.

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

Some examples of floats

Here are a few simple examples that illustrate the properties of floats, and show some of the things you can do with them.

A left-floated boxout

Here we have a regular (non-floated) column of text, with a left-floated box on the left that the regular text wraps around.


<div style="float: left; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>This is our left-floated text box.</p>
</div>
  
<p>
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
</p>

This is what it looks like:

This is our left-floated text box.

This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.

A right-floated boxout

This is similar to the last example, but this time the box is floated right rather than left.


<div style="float: right; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>This is our right-floated text box.</p>

</div>
  
<p>
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
</p>

This is what it looks like:

This is our right-floated text box.

This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.

Two columns of text

In this example, we use two floats side-by-side to create two columns of text. We use two left-floated divs to do this (not a left float and a right float as you might expect). The second floated div sits to the right of the first floated div.


<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our left text column.
    This is our left text column.
    This is our left text column.
  </p>
</div>

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>

<div style="clear: both;"> </div>

This is what it looks like:

This is our left text column.
This is our left text column.
This is our left text column.

This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.

The clear property

You’re probably wondering what this is for:


<div style="clear: both;"> </div>

The clear property is a way of saying “make sure this element does not run alongside a previous float”. By putting a div with clear: both after our floated columns, we’re saying “don’t run this div, or anything after it, alongside our floated columns”.

Without having an element with clear: both after our floated columns, all later content on the page would attempt to flow alongside the columns. (Try it yourself and see what happens!) You could say that we’re telling the browser, “the floats end here”.

Possible values for the clear property are: left (don’t run alongside any left-floated boxes), right (don’t run alongside any right-floated boxes), both (don’t run alongside any left- or right-floated boxes), and none (do nothing). When in doubt, use both.

Rules to remember

  • If you want to have a right-floated box, you need to put the HTML for the floated box before the non-floated content (not after as you might expect).
  • In the original CSS version 2 spec you had to specify a width for all floated elements (though the width could be relative, such as a percentage width). In the new CSS2 spec, however, an explicit width is not required.
  • If you need to have content after a float that shouldn’t run alongside the float, use the clear property.

Go forth and float!

Now that you understand how floats work, try making a few floated boxes yourself, remembering the above rules. Floats are a key part of building CSS layouts, so they’re well worth getting the hang of. You might also like to refer to the official specification of the ‘float’ property.

Filed Under: CSS Tagged With: cascading style sheets, column layout, floated div, floated elements, stylesheets

Reader Interactions

Comments

  1. mcdrummerman says

    12 April 2010 at 8:13 pm

    Thanks for this. It was helpful for a beginner.

    [Edited by mcdrummerman on 12-Apr-10 20:13]

    Reply
  2. matt says

    16 April 2010 at 3:04 am

    @mcdrummerman: Thanks for the feedback – I’m glad you found the article helpful. πŸ™‚

    Reply
  3. yob says

    15 May 2010 at 9:45 am

    I’ve been using tables for years because I never really grasped the concept of floating divs until I read this article. How simple it can be … thanks for sharing!

    Reply
  4. matt says

    18 May 2010 at 4:36 am

    Thanks yob. I’m happy the article helped you out!

    Reply
  5. trebor says

    25 July 2010 at 10:32 am

    Hi Matt

    I have been trying to get my head around CSS v Tables for several months and I have to say the article has helped, however the problem I have is trying to emulate a table.

    I have been asked by a local charity to build a basic site I could do it within 1/2 an hour using a table but I have spent three days trying to get this to work in CSS almost to the point of abandoning the CSS route and just putting in a table.

    It’s not so much the float it’s getting the content how they want it, is there anyway I could upload the image and seek your advice I am looking for how to do not for you to do.

    trebor

    Reply
  6. matt says

    27 July 2010 at 3:53 am

    @trebor: Sure no problem, although we don’t have an image upload facility on this site. How about uploading to http://imageshack.us/ then posting the URL here?

    Reply
  7. trebor says

    27 July 2010 at 4:50 am

    Hi Matt

    This is due to go live on August the 5th the table one looks okay to them but I know is unprofessional looking, so if you can have a look and point me in the right direction.

    The site is already on a server so I have set up a mock site here is the link http://www.helpinghands-childcare.co.uk/mockSite/index.php

    Thanks

    trebor

    Reply
  8. matt says

    27 July 2010 at 5:20 am

    @trebor: I didn’t understand the bit about the logo and top bar matching up / staying along side. However it sounds like you want your left and right columns to stay the same height as each other, yes? This is known as faux columns, and is easy to do using a simple repeating background image. Here are some good tutorials on this topic:

    http://www.alistapart.com/articles/fauxcolumns/
    http://www.communitymx.com/content/article.cfm?cid=afc58

    In this case all you need is a 2-pixel-wide image in your dark blue colour that you set as a repeating background image on the container that contains your 2 floated column divs. The container (and background) will then stretch to the height of the tallest column within the container.

    Make sense? πŸ™‚

    Reply
  9. trebor says

    27 July 2010 at 9:49 am

    Matt

    Okay I will try again
    Left column has the logo at the top and navigation below it
    Contents / right column has first div Info goes here (Top Info bar) needs to be flexible and immediately below this is the colored band.
    The problem I have is getting both the top info bar and the colored bar to sit on top of each other and both along side the logo.

    Hope this clearer.

    trebor

    Reply
  10. matt says

    28 July 2010 at 2:09 am

    @trebor: Float the logo div left, and create another right-floated div containing both the info bar and color bar.

    Not sure what you mean by “flexible” but if you want the layout to be fluid (stretches horizontally to match the width of the browser) then you can specify percentage widths instead of pixel widths for your floated divs.

    Does that help?

    Reply
  11. trebor says

    29 July 2010 at 8:24 am

    Hi Matt

    Well after a few painstaking hours and a few more grey hairs I think I have cracked it.
    http://www.helpinghands-childcare.co.uk/mockSite/test.html

    Dreamweaver CS3 does not like the layout throws it all over the place but when viewed in IE looks good Fire Fox puts the color bar a fraction out of line but apart from that fine.

    I await your comments

    Thanks Again

    Trebor

    Reply
  12. matt says

    1 August 2010 at 5:16 pm

    @trebor: Glad you got it working. πŸ™‚ I wouldn’t worry about it not looking right in Dreamweaver – it wouldn’t be the first time. πŸ˜‰

    Reply
  13. vCopia says

    2 April 2011 at 11:27 am

    Matt,

    I had to post and tell you how much I appreciate your taking the time to share a “how to” on floating side by side columns. I spent days searching the web, posting on forums, talking to experienced coding colleagues and no one could sufficiently respond. My coding challenge required I stretched your tutorial one step further, in that I wanted non-floating text to wrap around any white space left beside these two floating columns, on what would become a reusable template page for our blog, and the clarity of your descriptions assisted in me in doing just that.

    So, again, thanks. You’ve helped us add a bit of smooth sophistication to our site.

    [Edited by vCopia on 02-Apr-11 11:31]

    Reply
  14. matt says

    4 April 2011 at 5:16 am

    vCopia: Thanks very much for your kind words and feedback – much appreciated. πŸ™‚

    Reply
  15. mincuu says

    6 September 2012 at 8:17 am

    thanks guys..

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits