CODEWITHSUNDEEP
htmlcsscss-grid
Lê Nghĩa
Lê Nghĩa

Reputation: 255

How to align content of a div to the bottom with css?

How to align content of a div to the bottom with css

Could anyone help complete this? Or at least point to the right direction?

I want it that way

enter image description here

This is my code:

.bbb{
text-align:center;
bottom: 20px;
}
.text-wi{
border-top:2px dashed #13aff2;
	padding: 5px 0 0 20px;
}

.haha{
	padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
	padding: 0 5px 0 5px;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}
<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
	– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
	<div class="bbb">	<a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
	BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
	</div></div>

It does not work as I would like. What I am doing wrong?

Any help is appreciated

Upvotes: 1

Views: 643

Answers (3)

NAUMAN QAMAR Mujtaba
NAUMAN QAMAR Mujtaba

Reputation: 21

other styles like position: absolute etc. didnt work for me. using css flex-box and grid are some of the easiest way you can align items.

i did change the html a little, i.e. making content on right and left separate div CSS

<!DOCTYPE html>
<html>
<body>
<style>

.widgethost{
background-color:green;
display: flex;
flex-direction: row;
justify-content:flex-start;

height:100vh;

}

.parent{
margin: 1rem;
color:white;
display:flex;
flex-direction:row;


display:flex;
flex-direction:column;
justify-content:space-between;

border:5px solid black;

}



a, a:visited, a:hover{
text-decoration:none;
color:black;
}


</style>

HTML


<div class="widgethost">
  <div class="parent aaa">
    <div class="host-woovn">
      AAAAAAAAAAAAAAAAA
    </div>
    <div class="text-wi">
      – A<br>
      – B<br>
      – C<br>
      – D<br>
      – C
    </div>
    <div class="bbb">
      <a href="/" target="_blank" class="button">AAAAA</a>
    </div>
  </div>        
  <div class="parent bbb">
    <div class="host-woovn">
      BBBBBBBBBBBBBBB
    </div>
    <div class="text-wi">
      – A<br>
      – B<br>
      – C<br>
      – D<br>
      – E<br>
      – B<br>
      – C<br>
      – F
    </div>
    <div class="bbb">
      <a href="/" target="_blank" class="button">BBBB</a>
    </div>
  </div>
</div>  

</body>
</html>

Upvotes: 1

user10071963
user10071963

Reputation:

The easiest solution to achieve this if you have a child element that you want directly at the bottom of a parent is to use position.

.parent {
   background: #ddd;
   position: relative;
   height: 200px;
   width: 300px;
}
.child {
   background: red;
   position: absolute;
   bottom: 0%;
   left: 50%;
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}
<div class="parent">
  <div class="child">
    I'm at the bottom!
  </div>
</div>

This method also utilizes 2D Transforms to horizontally center the child element. As you can see, the red box is forced to the bottom of the gray box by the lines position: absolute; and bottom: 0%; in particular.

Upvotes: 1

Xenio Gracias
Xenio Gracias

Reputation: 2758

I did it using position property. Hope this helps you.. thanks

.bbb{
    text-align: center;
    /* bottom: 20px; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.text-wi{
border-top:2px dashed #13aff2;
	padding: 5px 0 0 20px;
}

.haha{
	padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
	padding: 0 5px 0 5px;
  position: relative;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}
<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
	– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
	<div class="bbb">	<a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
	BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
	</div></div>

Upvotes: 2

Related Questions