CODEWITHSUNDEEP
htmlcssalignment
David
David

Reputation: 41

How to align div to the bottom of another div in HTML?

How do I align div to the bottom of another div in HTML? And why it doesn't work? HTML:

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

CSS:

#big {
    background-color: red;
    margin: 10px;
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    margin: 10px;
    display: inline-block;
}

Upvotes: 3

Views: 12756

Answers (5)

FINDarkside
FINDarkside

Reputation: 2435

This will work: http://jsfiddle.net/4f4ejwr0/5/

#big {
  background-color: red;
  margin: 10px;
  position: relative;
  height: 300px;
}
#bottom {
  position: absolute;
  bottom: 0px;
  margin: 10px;
}
.small {
  width: 150px;
  height: 150px;
  background-color: blue;
  float: left;
  margin-left: 10px;
}
<div id="big">
  <div id="bottom">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
  </div>
</div>

Upvotes: 3

TheBosti
TheBosti

Reputation: 1425

Try this

    #big {
    background-color: red;
    margin: 10px;
    width: 150px; //new line
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    position: relative; // new line
    margin: 10px;
}

Live jsfiddle

Update: This is ok ? Jsfiddle

Upvotes: 0

Moob
Moob

Reputation: 16184

Your question is unclear but do you mean like this?..

enter image description here 

#big {
    display:table-cell;
    position:relative;
    vertical-align:bottom;
    background-color: red; margin: 10px; width: 800px; height: 300px;
}

.small {
    display: inline-block; 
    width: 150px; height: 150px; background-color: blue; 
    margin: 10px;
}
<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

Upvotes: 7

CH3M
CH3M

Reputation: 61

Add the following to your CSS Class:

bottom:0 !important;

and remove the position portion.

Upvotes: 0

indubitablee
indubitablee

Reputation: 8206

is this what youre looking for? http://jsfiddle.net/swm53ran/94/

should be changed to 

position: relative;

Upvotes: 0

Related Questions