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>
     </div>
    </div>

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 almost 6 years ago

1 answer

Ktash 1851
1
point

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 almost 6 years ago by Ktash
  • Really cool. But i think "discription" should hold the display:block or display:inline-block rule. Sisira almost 6 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 almost 6 years ago