Scribd
Upload
44 views4 pages

CSS Floats

The document discusses CSS floats, which allow elements to be positioned to the left or right side of their container and other content to wrap around them. Floats are created using the float property and examples are given showing left and right floated boxes as well as using multiple floats to create multi-column layouts. The clear property is also discussed as a way to clear floats and prevent later elements from flowing alongside floated elements.

Uploaded by

Geay Peter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views4 pages

CSS Floats

The document discusses CSS floats, which allow elements to be positioned to the left or right side of their container and other content to wrap around them. Floats are created using the float property and examples are given showing left and right floated boxes as well as using multiple floats to create multi-column layouts. The clear property is also discussed as a way to clear floats and prevent later elements from flowing alongside floated elements.

Uploaded by

Geay Peter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Floats

Tutorial by Matt Doyle | Level: Intermediate | Published on 17 July 2006


Categories:

 Website Authoring > CSS

What are floats in CSS, and what can you use them for? This tutorial walks you through this
essential CSS topic, with examples of usage.

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.

You might also like