Div width 100% but want an anchor inside to only be 85px wide??

Question

I have a div at 100%, in order to center things i have an anchor tag inside i only want at 85px width, but it is not recognizing this and will just expand based on the length of text that is in the anchor tag.

HTML:

<div class="players_names">
    <a class="player_name" href="#">34 J. Langenbrunner</a><br />
    <a class="team_name" href="#">TORONTO</a>
</div>

CSS:

.players_names{
     width: 100%;
     position: relative;
     z-index: 3;
     text-align: center;
 }
.players_names a{
     color: #fff;
 }
.players_names a.player_name {
     width: 85px;
     font-size: 1.1em;
     text-align: center;
     line-height: 1;
 }

why can't it just do what i tell it to do?

Answer 1

a is an inline level tag. Only block level tags can have a width set. As has been stated in the comment by kmfk, you can set display: block in your CSS for the element.

Answer 2

By default, a is an inline tag. In order to specify a width (or height), you will need to get it to render as inline-block (or as block, since you seem to want it on its own lien anyway):

.players_names a.player_name {
     width:85px;
     font-size:1.1em;
     text-align: center;
     line-height: 1;
     display: block;
 }

Answer 3

Just replace

players_names a.player_name {
 width: 85px;
 font-size: 1.1em;
 /*text-align: center; - Delete this line */
 margin: 0 auto; /*Add this line*/
 display: block; /*Add this too*/
 line-height: 1;
}

Answer 4

hi you can add

display:inline-block;

or

display:block;

to your anchor then you will be able to modify its width and height, and if you want to hide the exceeding content you can use:

overflow:hidden;

or you can use css3 and warp the word to your width:

word-wrap: break-word;

hope this helps