website

This is the first a series of blog posts that I’m going to be writing that has to do with the CSS float property. I hope you can learn from this and be able to have a broader understanding of how you can use CSS to your benefit.

“So what is it good for”, you say? One of the easiest uses of the float property is to wrap text around a html block-level element.

You can make an image or even a section on your webpage have text wrap around it. I will show you examples of both.

First, you will need a long paragraph

<div id="post-float-content"><p>This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. </p></div>

Next, you will need the element you want floated.

<span class="post-float-element">This is the html element being floated.</span>

If you want you can also use an image or any other element you want floated. Here is an example.

<img src="#" class="post-float-element" alt="Image Test for Float"  />

Any element you assign the float property to will become a block-level element.

Now put the code together, and you will soon be on your way to text wrapping bliss. For this example, I want my floated element to be near the top. So I will put it outside the paragraph tag. You can put it anywhere you like, even inside the paragraph. But you won’t see any wrapping if you put it at the end of the paragraph. Feel free to experiment until you get what you are looking to achieve.

Now for the CSS.

I’ve added some basic styling to the floated element. So that you can see how the block-level element is behaving inside the paragraph. It should be very apparent what is going on.

.post-float-element{
float:left;
width:100px;
height:50px;
border:1px solid #444;
padding:2px;
background-color:#dedede;
clear:left;
}

Here is the example in full. I hope you’ve enjoyed this basic post about the float property. There will be more to come integrating the float property into other parts of your website.

This is the html element being floated.This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property. This is a paragraph of text to experiment with the float property.