Today, let talk about how to float something on your blog or website.

We see this may very helpful if you want playing around your blog coding.  At first, we found it’s hard to image how does it work, but after getting it, we see it’s easy to understand if there some clear instructions at the beginning.  Like we said, it’s hard to get it, so we come up a new solution to understand it easier and the guide is clearer.  Hope it’ll help you and not make you confuse.  To make easy understanding, we created a image which cover all the basic of “float“.  Let see the image.

Even though we haven’t say anything about it, we know you understand as much 90% of how it is and how to use it.  Anyway, let say a little bit about float in css.

Let say you want to place an image on your article/post; this is easy, right? But how about placing the image on the left hand-side of the article, so how we are going to do?

For example, the image is named as circle.png.  Now to place it on the left of the article by assigning it as float: left;.  The following example, we use span.

<span style=”float: left;”><img src=”circle.png”></span>

*This is a short code in the purpose of making easy to understand what we’re saying; when you get the basic, then you can create/write more complicated codes.

Now let see how creating a code to display an image to the right hand-side of the article.

<span style=”float: right;”><img src=”circle.png”></span>

You can see both code examples are only difference at the word “left” and “right” and the rest of them are the same.

What is float?

Float is an css syntax which assigns something to either left or right; it can’t be up and down.  Float is used most for the image.  Whatever information after (the image) is assigned on another end of the image.  For example, if the image is floated on the right, then the rest of the texts or the images goes to the left of the image.  If the image is floated on the left, then whatever after the image would go to the right.

Good luck and have a nice day!