Floating with CSS

float-cssThe CSS Float property allows you to add elements to a layout and make other elements, like text, wrap around it. One major way that this is used is with images. Elements can only be floated left or right, not up and down.

Floating is often used to push an element or an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

If an image is floated to the left, a following text flows around it, on the right:

 

img
{
float:left;
}

Floating Elements Next to Each Other

If you place several floating elements after each other, they will float next to each other if there is room.

Here we will make a simple image presentation using the float property. We will separate each image within it's own "div" tag and give it a class of "img-float":

<div class="img-float"> <img  src="/float-img.gif"  /> </div>

Then in our stylesheet we will define the rule for our class:

.img-float
{
float:left;
width:100px;
height:100px;
margin:2px;
}

The result would be this:

float-img
 

 

Now if we had a few images to display we would simply add them to the div element like so:

<div class="img-float">
<img  src="/float-img.gif"  />
<img  src="/float-img.gif"  />
<img  src="/float-img.gif"  />
</div>

The result would be:

float-imgfloat-imgfloat-img
 

As you can see the images align to the left with the 2px margin we set in the style rule.
Using the float property means that when your images cover the width of your element or page they will simply start a new line and flat to the left again.

To show what happens when the width is to small, look at the images below and re-size your browser width and watch what happens:

float-imgfloat-imgfloat-imgfloat-imgfloat-imgfloat-img
 

 

The float property is a very useful tool in the design toolbox.


Float An Image Within Elements

Wrapping text around an image element is easy when using the CSS Float attribute.
You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.

website-1

Lorem ipsum dolor sit amet, id adversarium complectitur pro. Sapientem dissentiunt pri et, delectus placerat his ne, et atqui neglegentur per. Has aliquando voluptatibus in, det sonet antiopam ea mea, quot molestiae voluptaria per no. Sonet possit dolores eu vel, ex vis semper urbanitas, est et solum brute. Lorem ipsum dolor sit amet, id adversarium complectitur pro. Sapientem dissentiunt pri et, delectus placerat his ne, et atqui neglegentur per. Has aliquando voluptatibus in, eius sonet antiopam ea mea, quot molestiae voluptaria per no. Sonet possit dolores eu vel, ex vis semper urbanitas, est et solum brute.

website-1 Lorem ipsum dolor sit amet, id adversarium complectitur pro. Sapientem dissentiunt pri et, delectus placerat his ne, et atqui neglegentur per. Has aliquando voluptatibus in, eius  dets sonet antiopam ea mea, quot molestiae voluptaria per no. Sonet possit dolores eu vel, exis vis semper urbanitas, est et solum brute Lorem ipsum dolor sit amet, id adversarium sonet complectitur pro. Sapientem dissentiunt pri et, delectus placerat his ne, et atqui legentur per. Has aliquando voluptatibus in, eius sonet antiopam ea mea, quot molestiae voluptaria per no. Sonet possit dolores eu vel, ex vis semper urbanitas, est et solum brute

As you can see above one image is floated to the left and another to the right using the float property like so:

.img-float-left
{
float:left;
margin-right: 10px;
}

We give the image element a margin -right property and value to seperate the image from the text for clarity.
You can do exactly the same but use "right" instead of "left".

You can float any HTML element using the "float:" property. A great way to help style your web pages.

 


Turning off Float - Using the Clear property

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

What this means is, if you have text elements after your floated images, then they will wrap around your images if there is space left.

To avoid this we can place another element after our images (usually a "div" tag) with the clear property like so:

<div class="clearfix"></div>

 

Then in our stylesheet we can place a rule for the clearfix class like so:

.clearfix { clear: both ; }

 

 Anything after the clear declaration will appear on a new line and not interfere with anything above it.

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter