From the course: CSS Positioning Best Practices

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Using the float property for positioning

Using the float property for positioning - CSS Tutorial

From the course: CSS Positioning Best Practices

Using the float property for positioning

In this lesson we are going to be talking about using float to position objects in CSS. In this first part we're going to show you the traditional use of float, which is to float an image and to have the text wrap around the image. So here we have a floating image and here's the text that wraps around it. This image is floating to the left and so the text naturally wraps around it to the right. So look at this in the document. So here is our XHTML document, we have the style inside of the <style> tag, and down here we have the text. So we have a div with an ID selector of textbox and an image with a class selector of floatLeft and the div wraps around all of this content. The image is the first item in the content and then after that we have the text. So the floatLeft class is right here and you see it just has a couple of items. It has the float property with the left value, and margin-right of 15 pixels. So that makes this image float off to the left and gives it this nice little…

Contents