CODEWITHSUNDEEP
htmlcssbutton
Pengalor
Pengalor

Reputation: 180

HTML button moves down in body if text is too long inside the button

The best way to know what I'm referring to is to see the output of the code on a screen larger than 900px wide. Making the big text shorter is not an option.

I also really want to avoid making the button any larger in either direction. If anything, I would like the button to be a little smaller, as far as height goes.

body {
  text-align: center;
  width: 100vw;
}

button {
  cursor: pointer;
  width: 440px;
  height: 140px;
  padding: 20px;
}

.title {
  font-size: 30px;
}

.info {
  font-size: 20px;
}
<body>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This sentence is too long and it brings it down.</div>
        <div class="info">I can't figure it out, please help.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
</body>

Upvotes: 2

Views: 2300

Answers (2)

Ali Naderi
Ali Naderi

Reputation: 64

Just add float:left to your button.

button {
  cursor: pointer;
  width: 440px;
  height: 140px;
  padding: 20px;
  float:left;
  margin-left:10px; /* to add some space */
}

The float property in CSS is used for positioning and layout on web pages. Read more about float in this article.

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

I can give you two solutions. Using flex and position: absolute.

This is a flex solution. You need to wrap buttons in an additional div, assigning flex rules to this div. Like these ones:

.btn_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}


body {
  text-align: center;
  width: 100vw;
}

.btn_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  cursor: pointer;
  width: 440px;
  height: 140px;
  padding: 20px;
}

.title {
  font-size: 30px;
}

.info {
  font-size: 20px;
}
<body>
 <div class="btn_container">
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This sentence is too long and it brings it down.</div>
        <div class="info">I can't figure it out, please help.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
   </div>
</body>

And this is an position: absolute solution. I noticed all the edits in the css.

body {
  text-align: center;
  width: 100vw;
}

button {
  cursor: pointer;
  width: 440px;
  height: 140px;
  /*padding: 20px;*/ /* remove it */
  position: relative; /* add it */
}

.title {
  font-size: 30px;
  position: absolute; /* add it */
  top: 0; /* add it */
  left: 0; /* add it */
  right: 0; /* add it */
  padding: 15px; /* add it */
}

.info {
  font-size: 20px;
  position: absolute; /* add it */
  left: 0; /* add it */
  right: 0; /* add it */
  bottom: 0; /* add it */
  padding: 15px; /* add it */
}
<body>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
  <button>
        <div class="title">This sentence is too long and it brings it down.</div>
        <div class="info">I can't figure it out, please help.</div>
    </button>
  <button>
        <div class="title">This test is short.</div>
        <div class="info">And there is no problem here.</div>
    </button>
</body>

Upvotes: 2

Related Questions