How to stop div elements from being affected by text line breaks?-CodePudding

So when the window resizes it forces paragraph text to break onto more lines. That's fine, but I have a button at the bottom of the element that is being affected by the new lines. The new lines are pushing that element down. How can I stop this?

When I resize the window the text takes more height yes, which forces the button down in the container. I need the button to stay in place. Even if, hypothetically the text were to overlap with that button. I tried position:absolute on the button, but that didn't work.

Also, I don't want the buttons height or top/bottom margin to be affected by the amount of lines that the text occupies at all. even without a shrinking window the button on div2 is being pushed down because the text breaks to one more line than the other two divs.

Beyond that, I have 3 side by side Divs all with the same button at the bottom. My middle div has a bit more text in it that breaks onto one more line than the other 2...So div1 text has 3 lines, div2 text has 4 lines, and div3 text has 3 lines. The div2 button is slightly lower than the other two because that div has 4 lines of text instead of 3...how can I stop this?

.container div p {
  font-family: $smallText;
  font-weight: 400;
  margin: 0;
  padding: 0.625rem 1.875rem 0 1.875rem;
  color: $transparentWhite;
  font-size: 0.938rem;
}

.container button {
  position: relative;
  margin-left: 3.125rem;
  margin-top: 9rem;
  margin-bottom: 0.625rem;
  border-radius: 1.875rem;
  padding: 0.938rem;
  width: 9.375rem;
  border: none;
}

<div class="container">
  <div class="sedans">
    <h1>SEDANS</h1>
    <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
    <button class="button1" type="button">Learn More</button>

CodePudding user response：

It's not that the new line is affecting the element rather your 9rem for the button is the one that pushes down way too far. Please see my code:

.container div p {
  font-family: $smallText;
  font-weight: 400;
  margin: 0;
  padding: 0.625rem 1.875rem 0 1.875rem;
  color: $transparentWhite;
  font-size: 0.938rem;
}

.container button {
  position: relative;
  margin-left: 3.125rem;
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  border-radius: 1.875rem;
  padding: 0.938rem;
  width: 9.375rem;
  border: none;
}

<div class="container">
  <div class="sedans">
    <h1>SEDANS</h1>
    <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
    <button class="button1" type="button">Learn More</button>

CodePudding user response：

Perhaps a fixed-height layout with a flexible box for the text would do. This would keep the button at the bottom. The drawback is that you have to specify a container height, which is somewhat anathema to responsive development. Ideally you'll let the content flow naturally.

.flex-wrapper {
  display: flex;
  flex-direction: column;
  height: 300px;
  background: pink; /* demo only */
  padding: 15px;
}

.flex-wrapper h1,
.flex-wrapper .button-box {
  flex: none;
  background: #ddd; /* demo only */
  overflow: hidden; /* demo only */
}

.flex-wrapper p {
  flex: auto;
  font-family: $smallText;
  font-weight: 400;
  margin: 0;
  padding: 0.625rem 1.875rem 0 1.875rem;
  color: $transparentWhite;
  font-size: 0.938rem;
}

.container button {
  position: relative;
  border-radius: 1.875rem;
  padding: 0.938rem;
  width: 9.375rem;
  border: none;
}

<div class="container">
  <div class="flex-wrapper sedans">
    <h1>SEDANS</h1>

    <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>

    <p class="button-box">
      <button class="button1" type="button">Learn More</button>
    </p>
  </div>
</div>