CODEWITHSUNDEEP
htmlcss
Dylan
Dylan

Reputation: 454

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

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>

Upvotes: 0

Views: 2177

Answers (4)

Johannes
Johannes

Reputation: 67748

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>

Upvotes: 1

behkod
behkod

Reputation: 2777

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

Upvotes: 0

Matthew W.
Matthew W.

Reputation: 409

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;
}

Upvotes: 0

terraelise
terraelise

Reputation: 3199

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;
}

Upvotes: 2

Related Questions