zero
zero

Reputation: 3084

child elements text in a floating div breaks

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

Answers (3)

Nick Beranek
Nick Beranek

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

Mark Schultheiss
Mark Schultheiss

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

Diodeus - James MacFarlane
Diodeus - James MacFarlane

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

Related Questions