I'm just entering the world of html and css, almost 2 weeks I've been making these boxes, but I would like the red part that is a button, to remove its properties (wight, line height, etc) that's why it looks like this, I would like it to always stay below the square, it is only below when the text is abundant. I tried with bottom 0, but it goes wrong, I don't put the css since 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;
}
What you need is to make use of
position: relative
orposition: absolute
for it tobottom: 0
work, since this property only works with positioned elements.You would have to give the property
position: relative
to the div that encompasses all the text and the button andposition: absolute
withbottom: 0
the button to position the button taking into account the div that encompasses it.In this way, no matter what lines your text occupies, the button will always be displayed at the end of them.
Example:
Modify this class in the css:
What you posted does not look like the image, I hope it helps you