Question

not sure what i’m missing, but here ti go’s:
i have a floating left div with a child div that is positioned absolutely to the bottom, but the text in the child div breaks twice:

<div class="imgDes"><p class="toBot">this is a test</p></div>​

css

.imgDes {
float:left;
position:relative;
height: 100px;

}

.toBot {
  position: absolute;
  bottom: 0px;

}​

here it is in action: http://jsfiddle.net/rz5Q8/
how can i keep the text inside from breaking to the next line?

Answer 1

Floating elements need a specified width. Curently “imgDes” has a width of zero. Give it a width and all will be well.

Putting borders on your elements is a good way to see what’s going on:

.imgDes {
    float:left;
    position:relative;
    height: 100px;
    width:300px;
    border:1px solid #000000
}

.toBot {
    position: absolute;
    bottom: 0px;
    border:1px solid #ff0000

}