CODEWITHSUNDEEP
htmlcss
Michael Samuel
Michael Samuel

Reputation: 3920

A href tag with display block and text-align fills the width

I have this simple HTML:

<a style="display:block;text-align:right" href="link.com">Test Link</a>

I want to place a link to the far right of a parent DIV. However, I tried the above code but it leads the link to fill all the space meaning it's clickable across the whole width of the div.

The only ways to avoid this are to give a fixed width to the link or to wrap the link in another DIV. Is there any other way? Or to float the link but it will break the layout

Upvotes: 0

Views: 3055

Answers (3)

Dennis Anderson
Dennis Anderson

Reputation: 1396

float will fix this

dont forget the clear the float ! 

<div style="width: 200px; background-color: red;">
    <a style="float:right;" href="link.com">Test Link</a>
    <div style="clear:both;"></div>
</div

see the difference with and without the clear in the following fiddles!

With clear

http://jsfiddle.net/j9q8jgvm/

without clear

http://jsfiddle.net/j9q8jgvm/

Upvotes: 0

Candlejack
Candlejack

Reputation: 445

JSFiddle example

I've used display:inline-block and float:

.parent {
    display:inline-block;
    width:100%;
}

.link {
    display:inline-block;
    float:right;
    text-align:right;
}

EDIT: Having seen your comment about not being able to use floats, you can also do this using display:inline-block and fixed widths.

Upvotes: 0

Tsasken
Tsasken

Reputation: 689

You can use a float for 'floating' it to the right side of your div.

<a style="float:right" href="link.com">Test Link</a>

See this fiddle: http://jsfiddle.net/wstmrtgz/

Upvotes: 2

Related Questions