CODEWITHSUNDEEP
htmlcss
AF1
AF1

Reputation: 17

Back button not aligning itself to the bottom of a div

I have a div container with some text in it, and a back button. I want the text to be at the top of the div and the back button to be at the bottom of the div. How do I do this? Jsfiddle example of it

#view {
  text-align: center;
  width: 700px;
  height: 700px;
  background-color: #197000;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}

#view_back_button {
  vertical-align: bottom;
  border-radius: 25px;
  border: 2px solid #B40000;
  background: none;
  color: #060606;
  width: 150px;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  padding: 15px;
  font-family: 'Montserrat', sans-serif;
}
<div id="view">
  <h1>Name</h1>
  <p>Allergies: </p>
  <p>Side effects: </p>
  <p>Type of medication: </p>
  <p>Additional information: </p>
  <div id="view_button">
    <form>
      <button id="view_back_button" type="submit">BACK</button>
    </form>
  </div>
</div>

Upvotes: 0

Views: 68

Answers (4)

TechnoTech
TechnoTech

Reputation: 799

added position: relative to parent container and css for view_button

#view {
        text-align: center;
        width: 700px;
        height: 700px;
        background-color: #197000;
        margin:auto;
        padding: 20px;
        border-radius: 10px;
        margin-top: 50px;
        margin-bottom: 50px;
            font-weight: 400;
        font-family: 'Montserrat', sans-serif;
      position:relative; /* added */
      
    }
    /* added*/
    #view_button {
      position: absolute;
      bottom:10px;
      width:100%;
    }

    #view_back_button {
      /* removed vertical-align */
        border-radius: 25px;
        border: 2px solid #B40000;
        background: none;
        color: #060606;
        width: 150px;
        font-weight: 400;
        font-size: 12px;
        cursor: pointer;
        padding: 15px;
        font-family: 'Montserrat', sans-serif;  
    }
<div id="view">
                <h1>Name</h1>
                <p>Allergies: </p>
                <p>Side effects: </p>
                <p>Type of medication: </p>
                <p>Additional information: </p>
                <div id="view_button">
                            <form>
                    <button id="view_back_button" type="submit">BACK</button>
                </form>
                    </div>
            </div>

Upvotes: 1

SoliMoli
SoliMoli

Reputation: 786

Is it useful for you? I just added position: relative; to your container and then used absolute,left,right and bottom to locate it.

#view {
  text-align: center;
  width: 700px;
  height: 700px;
  background-color: #197000;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
position: relative;
}

#view_back_button {
  vertical-align: bottom;
  border-radius: 25px;
  border: 2px solid #B40000;
  background: none;
  color: #060606;
  width: 150px;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  padding: 15px;
  font-family: 'Montserrat', sans-serif;

}

#view_button {
  position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 50px;

}
<div id="view">
  <h1>Name</h1>
  <p>Allergies: </p>
  <p>Side effects: </p>
  <p>Type of medication: </p>
  <p>Additional information: </p>
  <div id="view_button">
    <form>
      <button id="view_back_button" type="submit">BACK</button>
    </form>
  </div>
</div>

Upvotes: 1

Tejeshree
Tejeshree

Reputation: 962

#view {
  text-align: center;
  width: 700px;
  height: 700px;
  background-color: #197000;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  position: relative;
}

#view_back_button {
  vertical-align: bottom;
  border-radius: 25px;
  border: 2px solid #B40000;
  background: none;
  color: #060606;
  width: 150px;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  padding: 15px;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 20px;
}

#view_button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
<div id="view">
  <h1>Name</h1>
  <p>Allergies: </p>
  <p>Side effects: </p>
  <p>Type of medication: </p>
  <p>Additional information: </p>
  <div id="view_button">
    <form>
      <button id="view_back_button" type="submit">BACK</button>
    </form>
  </div>
</div>

Upvotes: 1

Chaska
Chaska

Reputation: 3205

Archive by revise some css code like below:

#view {
  position: relative; /* add */
  text-align: center;
  width: 700px;
  height: 700px;
  background-color: #197000;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}

#view_button { /* add */
  position: absolute;
  bottom: 30px;
  width: 100%;
}

#view_back_button {
  /* vertical-align: bottom; */
  border-radius: 25px;
  border: 2px solid #B40000;
  background: none;
  color: #060606;
  width: 150px;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  padding: 15px;
  font-family: 'Montserrat', sans-serif;
}
<div id="view">
  <h1>Name</h1>
  <p>Allergies: </p>
  <p>Side effects: </p>
  <p>Type of medication: </p>
  <p>Additional information: </p>
  <div id="view_button">
    <form>
      <button id="view_back_button" type="submit">BACK</button>
    </form>
  </div>
</div>

Upvotes: 1

Related Questions