How to put a footer of a HTML CSS box

Question

How to put a footer of a HTML CSS box

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I am recently in the world of html and css, almost 2 weeks I am doing these pictures, but I would like the part of rojito that is a button, that will remove its properties (wight, line height, etc) that is why see so, I would like it to always remain below the square, it is only below when the text is abundant. Try with bottom 0, but I get it wrong, I do not put the css because I guess it's wrong, but I put the html.

Thanks.

 <div class="hospital">
<div class="hospital-img">
  <img src="img/huesitos.png">
</div>
<div class="hospital-description">
  <ul>
    <li>
      <h2>Traumatologia</h2>
    </li>
    <li>
      <p>Nos encargamos  de las lesiones traumáticas de columna y extremidades que afectan a: Huesos: fracturas (fractura de femur, fractura de húmero, fractura de Colles), epifisiólisis, etc.                         </p>
    </li>
  </ul>
</div>
 <div class="book">
  <a href="#">Más Informacion</a>
 </div>
</div>

CSS

.hotel {
 border: 2px solid #FFF;
  margin: 20px auto;
  padding: 10px 0px 0px 0px;
  width:25%;
  border-radius:10px;
}
.hotel li{
    display: inline-block;
}

.hotel-img {

  text-align: center;
  margin-top: 20px;
}

.hotel-description {
 text-align: justify;
  width: 90%;
}

.book {
  bottom: 0;
  width: 100%;
}

a {
    bottom: 0;
  background-color: #D7263D;
  color: #FFF;
  display: block;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 16px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
h1 {
  color: #FFF;
  font-size: 70px;
  font-weight: 900;
  margin: 0;
  padding-top: 120px;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  color: #FFF;

  margin: 0;
  text-align: center;
}

h3 {
  color: #D7263D;

  font-size: 32px;
  margin: 0;
  position: relative;
  text-align: left;
  text-transform: uppercase;
}

p {
  color: rgba(255, 255, 255, 0.75);

  margin: 0;
  text-align: left;
}

html5 html css3 css

asked by Francis Yourem 26.05.2017 в 17:31

source

2 answers

0

Modify this class in the css:

.book { 
  width: 100%; 
  position:absolute;
  bottom:0;
  right: 0;
}

What you posted does not look like the image, I hope it serves you

answered by 26.05.2017 в 17:45

data entry with (input) in 3x python Search within a pdf with Python

score 1 · Accepted Answer

What you need is to use position: relative or position: absolute for bottom: 0 to work, since this property only works with positioned elements.

You should give the property position: relative to the div that includes all the text and the button and position: absolute with bottom: 0 to the button to position the button taking into account the div that includes it.

In this way, it does not matter what lines your text occupies, the button will always be displayed at the end of them.

Example:

.cuadrado{
  position: relative;
  width: 400px;
  height: 400px;
  background-color: red;
}

.boton{
  position: absolute;
  bottom: 0;
  width: 150px;
  background-color: green;
}

<div class="cuadrado">
  <p>Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto Texto texto texto </p>
  
  <div class="boton">
      <a href="#">Más Informacion</a>
  </div>
</div>