There is an
img element at the beginning of this paragraph of text. Because
img tags are inline elements by default, it is making the first line of the paragraph very tall. However, css provides a way to make text flow around the image. We do this with the float property.
float property is applied to the element around which we want text to wrap. It may seem a bit counter-intutive, but in your HTML code, the floated element must come before the text that wraps around it, just like this document. We can
float: left; or
float: right;, but sadly, we cannot
We can use
margin on the floated element to control white-space around it, "pushing away" the text that gets too close.
- Create a stylesheet and link it to this document.
- Select the
portraitclass, and add the rule
- Set a
marginvalue for the portrait such that it has
2rembreathing-room to the right and bottom, but
0top and left.
Let's duplicate the
img tag above, and place a copy of it at the beginning of this paragraph.
- Copy the
imgtag as indicated. No need to style — it will pick up the same styles as the first
imgbecause it has the same class applied.
See how the Instructions block also floated around the image? Floating an element doesn't only make text wrap... it makes everything the follows the element wrap, until the element is no longer in the way. But what if we don't want that? What if we want to make sure the instructions always 'get past' the floated item, no matter what?
- Make a selector for
.instructions, and add the rule
We use the
clear property to tell a subsequent element to 'clear' floated items. You can
clear: left; to clear any elements that are floated left,
clear: right; to clear any elements that are floated right, or
clear: both; to clear all floated items regardless of the side they're on.