• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 617
  • Last Modified:

css height align bottom

hi there,
another question for the css-positioning issue with making an element within a div align at the bottom.  

so if you have a box, with a title in it with content below that then a button below that the problem is that button sits immediately below the content, rather than being at the very bottom of the box.  therefore the buttons dont align as I have many of these boxes sitting beside each other.

please advise how I can resolve this issue,
many thanks
0
jimbona27
Asked:
jimbona27
  • 3
  • 3
1 Solution
 
SyntheticsCommented:
Try making the boxes position:relative (and obviously not changing the top, bottom, left and right values so it stays exactly where it is anyway)

Then make the buttons position:absolute and bottom:10px (or whatever).
0
 
jimbona27Author Commented:
nope, not working.  try this

<html>

<head>
<style>
.thumbnail-box {
      float: left;
      width: 120px;
      margin: 0px 0 0 0;
      position: relative;
      border: 1px solid red;
}
.thumbnail-box .title {
        color: #3e76b3;
      font-size: 13px;
      height: 110px;
}
.thumbnail-box .title a {
        color: #3e76b3;
      text-decoration: none;
}
.thumbnail-box .title .atb {
      padding: 4px 0 0 0;
}
.thumbnail-box .title .handset {
      color: #787878;
}
.border {
      border: 1px solid #dedede;
}
.freegifts {
      border: 1px solid #dedede;
      padding: 10px;
}
.freegifts .title {
      color: #81caed;
      padding: 0 0 4px 0;
}
.atb {
      background-color: red;
      position: absolute;
      padding: 0 0 10px 0;
}
</style>
<body>

<div class="thumbnail-box">
      <img src="img/thumbnail.gif" />
      <div class="title">
            Samsung G600
            <br />
            <a href="javascript:void(0)">View details</a>
            <br />
            <span class="handset">Free handset</span>
            <div class="atb">
                  <img src="img/atb.gif" class="btn" />
            </div>
      </div>      
</div>
<div class="thumbnail-box">
      <img src="img/thumbnail.gif" />
      <div class="title">
            Motorola
            <br />
            RAZR2 V8
            <br />
            <a href="javascript:void(0)">View details</a>
            <br />
            <span class="handset">Free handset</span>
            <div class="atb">
                  <img src="img/atb.gif" class="btn" />
            </div>
      </div>      
</div>
<div class="thumbnail-box">
      <img src="img/thumbnail.gif" />
      <div class="title">
            Sony Ericsson
            <br />
            K810i
            <br />
            <a href="javascript:void(0)">View details</a>
            <br />
            <span class="handset">Free handset</span>
            <div class="atb">
                  <img src="img/atb.gif" class="btn" />
            </div>
      </div>      
</div>
<div class="thumbnail-box">
      <img src="img/thumbnail.gif" />
      <div class="title">
            Sony Ericsson
            <br />
            W580i Grey
            <br />
            <span class="handset">Free handset</span>
            <br />
            <a href="javascript:void(0)">View details</a>
            <div class="atb">
                  <img src="img/atb.gif" class="btn" />
            </div>
      </div>      
</div>
0
 
SyntheticsCommented:
.atb {
      background-color: red;
      position: absolute;
      padding: 0 0 10px 0;
      bottom: 0;
      left: 0;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jimbona27Author Commented:
ok, sorry for the delay, will let you know.  thanks
0
 
jimbona27Author Commented:
great thank you.
0
 
SyntheticsCommented:
No problem
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now