HTML button only uses width and height of text in the button

Question

I have a small problem. I am trying to change the width and height of a button but for some reason, it will not let me. The button automatically stays the same width and height as the contained text.

CSS

.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}

img[width="500"] {
border: 3px solid #5F5F5F;
border-radius:3px;
float: left;
}

#leftRetail {
display: block;
height:354px;
width: 1308px;
float:right;
text-align: center;
vertical-align: middle;
line-height: 354px;
}

.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}

HTML

<div class="flexcontainer">
            <div>
                <img src="anyImage.jpg" width="500" height="350"/>
            </div>
            <div id="leftRetail">
                <a href="Template.pdf" class= "button">Retail Menu</a>
            </div>
        </div>

Possible duplicate of [Setting a width and height on an A tag](http://stackoverflow.com/questions/4743254/setting-a-width-and-height-on-an-a-tag) — litel, Mar 01 '17 at 21:55

score 2 · Answer 1 · answered Mar 01 '17 at 21:56

2

You need to change your .button to use display: block or inline-block:

.button {
display: block;
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}

answered Mar 01 '17 at 21:56

terraelise

2,929
2
13
14

If I do that the button jumps up to beside the top right corner of the picture and my text disappears? – Dylan Mar 01 '17 at 22:11

Johannes · Accepted Answer · 2017-03-01T22:32:07.020

1

CHANGED ANSWER after copying the original code into a snippet:

I just realized that the whole thing is inside a flex container, which makes all child elements flex items automatically. (BTW: The float parameters have no effect in this case)

So, one method to add width and height to your .button is to give it some padding, as shown below:

.flexcontainer {
  display: flex;
  align-items: center;
  overflow: hidden;
}

img[width="500"] {
  border: 3px solid #5F5F5F;
  border-radius: 3px;
}

#leftRetail {
  height: 354px;
  width: 1308px;
  text-align: center;
  vertical-align: middle;
  line-height: 354px;
}

.button {
  background: #ed2626;
  border-radius: 2px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 12px;
}

<div class="flexcontainer">
  <div>
    <img src="anyImage.jpg" width="500" height="350" />
  </div>
  <div id="leftRetail">
    <a href="Template.pdf" class="button">Retail Menu</a>
  </div>
</div>

edited Mar 01 '17 at 22:32

answered Mar 01 '17 at 22:03

Johannes

64,305
18
73
130

If I change it to a block element, the 'button' (i know it isn't actually a button) jumps up to the top left corner of my left retail div, which makes it sit to the top right of the image? – Dylan Mar 01 '17 at 22:07
Apologies, the text doesn't dissapear it is just white so i could not see it. the text stays in the center of the div but the block moves to the top right corner – Dylan Mar 01 '17 at 22:14
I have. that didnt work. I need the block and the text to both be centered as they were previously, but being able to change the width and height also – Dylan Mar 01 '17 at 22:22

score 0 · Answer 3 · answered Mar 01 '17 at 21:57

0

You cannot modify the width and height of inline elements, manually.

Add display: block; (or inline-block) to your .button block, and you can observe that the height and width changes are you define it.

Only block elements may have their width and height set specifically.

Your button should now look like:

.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
display: block;
}

answered Mar 01 '17 at 21:57

Matthew W.

413
1
9
17

If I do that the button jumps up to beside the top right corner of the picture and my text disappears? – Dylan Mar 01 '17 at 22:04

score 0 · Answer 4 · answered Mar 01 '17 at 22:02

0

Just make it block-level element by adding display:bock to its style. Then you can apply whatever style you want!

answered Mar 01 '17 at 22:02

behkod

2,647
2
18
33

HTML button only uses width and height of text in the button

4 Answers4