CODEWITHSUNDEEP
javascripthtmlcsspositioning
DLF85
DLF85

Reputation: 189

Position div at bottom of containing div

I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.

HTML:

      <div class='container'>
          <aside>
              <img id="user-pic" src="images/blank-user.jpg">
              <a href="#">@User_Name</a>
              <div id="trend"><h6>TRENDING</h6></div>

          </aside>
          <section class="main">
          </section>
     </div>

CSS:

    #dT{
        width:inherit;
        bottom: 0px;
        border-top: gray;
        background-color: gray;
        font-size: small;
    }
.container{
    margin-top: 80px;
}
section{
    margin: auto;
    width: 400px;
    clear: left;
    top: 100px;

}
.tweet{
    width: 450px;
    height: 225px;
    background-color: #FFFFFF;
    border: 4px solid #F1433F;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 15px;
    padding: 25px 15px 0px 15px;
}
.tweetContent{
    width: inherit;
    height: inherit;
    margin: 5px 5px 0 5px;
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
}

There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.

It appears that the jquery aspect of the code might have something to do with it so here it is.

UPDATE: removed JQuery because it was not relevant.

Upvotes: 2

Views: 211

Answers (4)

Mandar Kawtakwar
Mandar Kawtakwar

Reputation: 107

use position property like position absolute or position relative so as to work with top, left,right,bottom properties

Upvotes: 0

Sooraj
Sooraj

Reputation: 10575

Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.

Update: And to the child elements for which you want to change position using left add position:absolute

P.S : Need to add relative for the div that contains #dT and absolute for #dT

#parentofdT
{
position:relative;
}

#dT
{
position:absolute
}

Upvotes: 4

Vincent Panugaling
Vincent Panugaling

Reputation: 906

You should add position: relative or position: absolute property to make the bottom: 0px work

 #dT{
        width:inherit;
        bottom: 0px;
        border-top: gray;
        background-color: gray;
        font-size: small;
        position: relative;
    }

Upvotes: 0

fnune
fnune

Reputation: 5534

Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/

Good luck.

Upvotes: 1

Related Questions