CSS Positioning and Floats

Posted by admin on April 17, 2010

What is CSS positioning and what are floats? CSS positioning allows you to assign how your element is to be positioned on the page. The most common types of positions used are absolute and relative. Absolute positioning means it will be placed wherever you assign it to be within the pages body while relative positioning means that the element will be positioned relative to its placement within the page. A float is typically used to make an element float to the left or right of the page.

Assigning element positioning:

position:absolute;
position:relative;

Floats are typically used for creating a columned layout or just for making elements that have other elements floating around them. When using a float for example you can have an image or a block of text that floats to either side of a body of text or paragraph data. When using floats or even position assignments you might want to assign the element block level status.

Assigning float status:

float:left;
float:right;

Assigning block level status will make sure that the element properly wrap to the bottom of that element. The other thing you will want to do when stacking floats is to make sure that the float level is properly terminated by assigning clear all in-between float levels.

Assigning block level status:

display:block;

Assigning clear terminator:

clear:all;

That is all for this blurb. More to come soon!

Comments

Leave a Reply



(Your email will not be publicly displayed.)


Captcha Code

Click the image to see another captcha.