Working with Layouts

float

float property decides whether to float an element or not. Without float each element will get placed below the one above. Possible values are left, right, none and inherit. float doen't work on absolute positioned elements.

• left - This makes the element float to the left. Everything else flows on the right of it.
• right - This makes the element float to the right. Everything else flows on the left of it.
• none - This is the default. It means no floating.

Syntax for using float

img
{
    float:right;
}

clear

Elements following floated elements will get wrapped around that floated element. clear property is used to stop this effect. Possible values of clear are left, right, both, none and inherit.

• left - It will clear the left floating for an element. The elements will move below the bottom outer edge of any left floated elements.
• right - It will clear the right floating for an element. The elements will move below the bottom outer edge of any right floated elements.
• both - It will clear both sides floating for an element. The elements will move below the bottom outer edge of any floated elements
• none - Its the default value and allows floating for an element

Syntax for using clear:

p
{
    clear:both;
}

overflow

overflow property specifies how (or whether) to display the content of an element when it exceeds the containing element. Possible values are visible, hidden, scroll, auto and inherit.

• visible - When content exceeds the container, it is not clipped, flows out of the container and is visible.
• hidden - When content exceeds the container, it gets clipped. Exceeded content becomes invisible.
• scroll - When content exceeds the container, it gets clipped and scrollbars appears.
• auto - Browser automatically generates scrollbar, if content exceeds

Syntax for using overflow:

div
{
    overflow:hidden;
}

z-index

z-index property specifies which element should be placed above or below other elements. Its like specifying z coordinate value for an element. z-index only works for elements having absolute, relative or fixed positions. Possible values are:

• auto - This is by default. Elements get positions according to their flow.
• length - Element with higher z-index value will be above other lower z-index valued elements.
• inherit - inherits the property of its parent.

Syntax for using z-index:

div
{
    position:fixed;
    z-index:10;
}

visibility

visibility property specifies whether to render an element or not. Possible value of visibility are visible, hidden, collapse and inherit.

• visible - This is by default. This value lets element be visible.
• hidden - The elements will become hidden but still takes the space required by them and affects the layout.
• collapse - Its valid for only table elements. It will remove the table row or column and affect the layout.

Syntax for using visibility:

p
{
    visibility:hidden;
}

cursor

cursor property specifies the type of cursor for an element. Possible values are auto, default, crosshair, pointer, move, text, wait, help, progress, inherit etc.

Syntax for using cursor:

p
{
    cursor:crosshair;
}