making all a tags same width

I am attempting to make links look like boxes. I thought I could simply apply height and width to them, but It's not working. I can, however, use margin and padding, but when I do that the boxes are relative to the size of the text in the a tag.

Screenshot (<!-- m --><a class="postlink" href="http://silent11.perlmonk.org/Screenshot.png">http://silent11.perlmonk.org/Screenshot.png</a><!-- m -->)

This should give you a good idea as to what I'm trying to do.


#books_chapters_volumes a {
margin-top: 1em;
margin-bottom: 1em;
padding: 2em;
background-color: #efefef;
border: 1px solid #333;
line-height: 6em; /* otherwise the boxes wrap over each other */
}

The first row is offset because the text in each box is only 1 character long, while the others contain 2 characters. I just want to set a hight and width to the boxes so no matter if there is even a few words it will still be say, 200px by 200px, or even 15% by 15% or even maybe 20em by 20em.

TIAYou need to set it to 'display:block;'. Then you can give it a width.You need to set it to 'display:block;'. Then you can give it a width.
Then they boxes stack on top of each other, I want them to go from left to right, then going down to the next line according when they reach the end of the screen ( just like text would )Try:

#books_chapters_volumes a {
display: block;
float: left;
margin-top: 1em;
margin-bottom: 1em;
padding: 2em;
background-color: #efefef;
border: 1px solid #333;
line-height: 6em; /* otherwise the boxes wrap over each other */
}

You may need to add a "clear" attribute to the element which follows these so that it is displayed below them, not to the right of them.excellent! Thanks!
 
Back
Top