pure css tool tip

        Custom tootip can be achieved by using css, but it require firefox and ie7 up to support. Below is demo

link as button

Anchors are inline elements, they only activate when you click on the content of the link. However, there instances when you want to create more of a button like with a larger clickable area. You can do this by setting the display property to block, and then change the width, and height, other properties to create the style and hit area you want.

float basic

A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box, or another floated box. Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of the document behave as if the floated box wasn’t there. But the space taken the repositioned element can not be used by other elements.

overflow:auto hack

float will take element out of its flow layout, which means the original position if not floated is taken out. So if all content of a container is floated, the container contains nothing , so it's height/width is zero. To overcome this, you either float the element or add overflow:auto. Overflow is a hack and seems to be better choice. Because the container will expand as much as can. If you choose the float the container, you much specify the width to 100%, in some case, this also cause problem. Because if the container has padding, margin or border, the width is over 100%, because the actual width is add up of all.

Relative vs Absolute position

        <p>Positioned element are the elements with relative or absolute setting value for the position style. Non-positioned element are the element without these value for the position style.Left/Right style can be used together to with positioned elements to control their position, but they have no effect for non-positioned elements.</p>