In this video, we will see how to float the element to the left or right of the page using the float attribute, add some margin and border to highlight the image and keep it a bit away from the text. And finally, we will see how to display a gallery of images using the float attribute.

Summary: In this video,before we start discussing floating we still have one stop regarding positioning. Note that by setting the overflow value to ‘auto’ the browser will automatically handle the overflow for you and add scrollbars if necessary.
Now back to floating. We will see how to float the element to the left or right of the page using the float attribute. This comes handy when we want to float a piece of text close to an image. We will accomplish this here and add some margin and border to highlight the image and keep it a bit away from the text. A similar behavior of floating an element can be done using the position attribute that we have learned in the previous video. Finally, we will see how to display a gallery of images using the float attribute.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

To have full access to this post (or download the associated files) you must have MrBool Credits.

See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video.Subscribe for this package!