Web Development

Float Elements on CSS Water

Float elements on css water
Written by Sandeep Likhar

Float Elements on CSS Water is the section 18 of Beginner’s Guide to CSS.

What we are going do in this section is same as floating in the water. Actually floating images on water kind of thing.

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts.

Elements can be floated in two ways. Either left or right. But remember not up and down. It means elements can float in only horizontally.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected.

For example if an image is floated to the right, a text next to it flows around it, to the left. See the following.

WestlifeWestlife were an Irish boy band, formed in July 1998 and disbanded in June 2012.
[code language=”html”]

Westlife were an Irish boy band, formed in July 1998 and disbanded in June 2012.

[/code]

See the order of the elements in the code. But the appearance is different from it. That is because image is floated to right and text automatically flows around it. And both text and images goes in the same lines.

Other important fact about floating is if you place several floating elements after each other, they will float next to each other if there is room.

If you really don’t like to flow the next elements around the floated element, you can use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.

Boyzone

Boyzone are an Irish boy band. The group split in 1999 and made a comeback in 2007.

We did the same thing above but giving the paragraph a clear style with property value clear on both sides.

[code language=”html”]

Boyzone are an Irish boy band. The group split in 1999 and made a comeback in 2007.

[/code]

Floating images become more useful when creating wonderful story lines. Stories with first character in each chapter always have some Gothical, Mythical effect. See follow example.

Once upon a time, far far away in the Karton Kingdom, there lived a farm boy 17 years old, working hard everyday morning till the night helping his father. He never had a single complaint about his difficult life, when other young men spending their life all day long in taverns drinking gossiping and having fun. He really enjoyed his farm life and all the working he had to do with his father spending all the day at the farm with farm animals.

If you don’t have a good mystical font, then use a image like as the follow.

Letter O

nce upon a time, far far away in the Karton Kingdom, there lived a farm boy 17 years old, working hard everyday morning till the night helping his father. He never had a single complaint about his difficult life, when other young men spending their life all day long in taverns drinking gossiping and having fun. He really enjoyed his farm life and all the working he had to do with his father spending all the day at the farm with farm animals.


In this section we come across few tricks of using float property in CSS. It comes more handy with using images. Next thing we are going to do in the next section is learning few aligning techniques using the properties we had already learned up to now.

WHAT’S NEXT?

Let’s learn few Aligning Techniques in CSS.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW