dole 0

I need to arange the value and the lorem ipsum text to the bottom of the div as in the following image, but everything I've tryed until now doesn't work. alt text

My html looks like this:

   <div class="product"> 
     <span class="title">Lorem Ipsum</span>
     <div class="values">
       <span class="price">$29,225</span>
       <span class="description">Lorem ipsum dolor sit amet, consectetur ...</span>

Can you help me with some pointers? TY

  • is your description has some character limit and also is ur values will display in a fixed height area ? Sisira over 8 years ago

1 answer

Ktash 1851

You'll need to set a width or something for the price to make this work.

Give price a width, set a left margin on the description of that width, and set price to position: absolute;. You'll also have to set a min-height to make sure that it is at least big enough to cover the content So, it comes out to:

.price {
    width: 10em;
    position: absolute;
    bottom: 0px;
    left: 0px;
.description {
    margin-left: 10em;
    display: block;
.values {
    position: relative;
    min-height: 1.8em;

That's really your best bet.

Answered over 8 years ago by Ktash
  • Really cool. But i think "discription" should hold the display:block or display:inline-block rule. Sisira over 8 years ago
  • Oh, yeah. I had that on my test page, but I forgot to put it here. Thanks for the catch. I don't think it actually needs it, but it may. Ktash over 8 years ago