CODEWITHSUNDEEP
csshtmlhyperlink
Zo Has
Zo Has

Reputation: 13038

Stop hyperlink inheriting div's width?

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

Upvotes: 3

Views: 2910

Answers (5)

Ben
Ben

Reputation: 57318

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).

Upvotes: 6

Valentin Flachsel
Valentin Flachsel

Reputation: 10825

display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.

Simply remove that declaration and your problem should be gone.

JSFiddle example

Upvotes: 1

olemarius
olemarius

Reputation: 1134

set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;

Upvotes: 1

Breezer
Breezer

Reputation: 10490

width:auto?

Or try display:inline;

on the links

it shouldnt get the divs width then

Upvotes: 0

scheffield
scheffield

Reputation: 6787

Do you mean something like this:

<a href="example.com" style="text-decoration: none;">Foo</a>

Upvotes: 0

Related Questions