Question

Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div’s width. How do I make the hyperlink’s clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here

Answer 1

Use

#links a {clear:left;float:left}

The float will allow the link to be sized, and the clear will prevent the links from being on the same line.

You may need to add a clear:left to the #links container depending on your design.

EDIT

A little tutorial since you asked:

There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.

Inline elements can’t have their width or height styled. Blocks can.

<a> is an inline element. By setting its display to block, you tell it to make a new line every time.

float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It’s sort of a mix between the two.

The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).

You won’t need display:block and float: at the same time.

Another solution would involve display:inline-block, but this is not supported in several browsers so isn’t encouraged (although I find it pretty handy).