CODEWITHSUNDEEP
htmlcss
M4DNE55
M4DNE55

Reputation: 49

Align an element to the bottom of a div in CSS?

I'd like to know how I can align an element to the bottom of a div in CSS.

Here is a screenshot of my page: http://prntscr.com/5ivlm8 (The arrow is to show where I want the element to go)

And here is my page:

<?php include 'head.php'; ?>
<div class="wrap">
   <div id="base">
       <div class="infobox">
           <div class="title">
               Welcome to <?php echo NOM_SITE; ?>
           </div>
           <div class="time">Today is <?php echo date("d/m/Y") ?></div>
       </div>
       <div class="enter">
          Test
       </div>
   </div>
</div>

And here is the "Enter" div CSS:

#base .enter {
    height: 40px;
    min-width: 60px;
    background-color: #000000;
    position: absolute;
    bottom: 0;
    left: 0;
}

Upvotes: 0

Views: 88

Answers (4)

priya786
priya786

Reputation: 1834

#base{
position:relative;
top:0;
left:0;
}

.enter{
position:absolute;
bottom:0;
top:100%;
left:0;
}

Upvotes: 1

Sathish
Sathish

Reputation: 2460

you should use a Position:relative on #base(parent) it controls the .enter(child div) with in parent div,

css:

#base{
position:relative;}
#base .enter{
position:absolute;
bottom:0;}

Upvotes: 1

yogihosting
yogihosting

Reputation: 6292

Here you will have to set the position of div with id=base to relative so that the enter div can adjust itself with it at the bottom left. Just include the below to your css

#base
{
    position: relative;        
}

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272066

The #base element needs to be positioned. Use position: relative on #base (absolute or fixed will also work).

Upvotes: 1

Related Questions