Book Image

Practical Web Development

By : Paul Wellens
Book Image

Practical Web Development

By: Paul Wellens

Overview of this book

Table of Contents (23 chapters)
Practical Web Development
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
10
XML and JSON
Index

Positioning


There are several CSS properties you can use to alter the position of an element on the page. The one with clearly the most impact is called float (each time I use it, it reminds me of the clown character in the Stephen King novel and movie It! when it says: And they all float!)

Float

I interpret the CSS float property as the CSS way to stack elements horizontally. If you give all of them a:

float:left;

You stack them from left to right. With a:

float:right;

You stack them from right to left. This can become very handy when you want to put the first part of your page, an introduction for example, on the right if room is available, and on top if not. In our above example, changing the float left into a float right will put the pictures on the right.

position:relative

The CSS position property can be used to position elements in a spot on the page that is different to where they would normally go. "Normally" is the same as position:static. Look at the following code:

#redsquare
{
width...