CSS float property. Lesson 14: Positioning of elements. With CSS positioning, you can place an element exactly where you want it on your page. Together with floats (see lesson 13), positioning gives you many possibilities to create an advanced and precise layout. The following will be discussed in this lesson: The principle behind CSS positioning Imagine a browser window as a system of coordinates: The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates.
Let's say we want to position a headline. By using the box model (see lesson 9) the headline will appear as follows: If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS: The result will be as follows: As you can see, positioning with CSS is a very precise technique to place elements. Absolute positioning An element which is positioned absolute does not obtain any space in the document. Show example Relative positioning Show example Summary. Float. Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it.
This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes. Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph. CSS Code: HTML Code: <body><img src="sunset.gif" class="floatLeft"><p>The images are contained with...
Display: The images are contained within the paragraph tag. This second paragraph has an image that is floated to the right. If you were to simply float three images to the right, they would appear alongside one another. The images are appearing below one another because the CSS clear attribute was used with the value of "right". Step by step CSS float tutorial.
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Floating an image and caption Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons".
Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9. Float : LE tuto ?