Floats
NOTE: Floats give you control over the layout of your page, and this is one of the most difficult concepts to apply to your work. Floats are one of the six box models.
Master this starting practice of positioning and the webdesign world is your oyster.
The order of understanding positioning
-
CSS
- the difference between inline and block level elements
- Floats
- Box Models
- Positioning
Float image left
NOTE: The text will automatically wrap around image and drop below the image. justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Don't forget to set the padding to conform to the left or right aesthetic specific to your use.
Float image right
NOTE: The text will automatically wrap around image and drop below the image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Don't forget to set the padding to conform to the left or right aesthetic specific to your use.
The dreaded clear
There are a few things you need to consider when applying floats. They are:
- block inline
- identify what's being cleared
- understand the concept of flow
Note: When using templates, be careful about what rules are being changed, you may accidentally alter a float.