CODEWITHSUNDEEP
css
Janese
Janese

Reputation: 751

How can I make my Button Divs all have the same width?

I'm trying to find the answer to a problem I have. What I have is many buttons and I want them to appear down the page and all be the same width. I have the following code and CSS. However they don't appear to be the full width. What I want ideally is them to be a width equal to the enclosing DIV. I also want the text to appear centered which it does now. Can anyone tell me why the buttons all appear different widths?

I have the following code:

<div style="width: 200px;">
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  sadfadsfdsafsadfsa</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  afds</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test asdfdsafadsfdsfasdfsadfdsf</a>
  </div>
</div>

and the following CSS:

.abc {
    float: left;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    width: 190px;
}

a.btn {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    cursor: default;
    font-size: 12px;
    padding: 3px 4px;
    text-decoration: none;
    width: 180px;
}

I created a fiddle

fiddle

Upvotes: 3

Views: 5324

Answers (6)

dweeves
dweeves

Reputation: 5605

you need to set a.btn display:block; since, by default, a are inline elements.

Upvotes: 0

Nick
Nick

Reputation: 2922

Link (a) elements are inherently inline elements, which ignore width declarations.

By applying a display:block to a.btn, it will accept your width declaration.

Upvotes: 1

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53597

remove the class="abc" div, they are not needed.
Give the .btn class a display: inline-block; (or just block, but I dislike it).

Upvotes: 1

Barry Kaye
Barry Kaye

Reputation: 7761

Add display:block; to a.btn.

Upvotes: 0

Sam Dufel
Sam Dufel

Reputation: 17598

You can only specify width for block-level elements. To correct it, you can add a display:block; or display:inline-block; to your a.btn class

Upvotes: 0

Ant
Ant

Reputation: 3887

If you want to specify the width of an a tag you need to set it to display: block

Upvotes: 4

Related Questions