Reputation: 3084
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?
Upvotes: 0
Views: 139
Reputation: 2751
You need to specify a width
on the parent element:
.imgDes {
float: left;
position: relative;
height: 100px;
width: 200px;
}
.toBot {
position: absolute;
bottom: 0;
}
Upvotes: 1
Reputation: 34168
if you give the .imgDes a width it will work: width: 100%;
One way to debug this type issue is to give the container and the element inside borders of differing color (lime and red for example) - as you see in this instance the length of the text "this" gave it the appearence of a width of that text by default (really a width of 0 of the parent container).
Upvotes: 1
Reputation: 114377
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
}
Upvotes: 1