CODEWITHSUNDEEP
htmlcss
rainydaymatt
rainydaymatt

Reputation: 630

Float text against image without wrapping underneath

I have a paragraph of text against a floated image; is there a way to get the text to stay against the border formed by the side of the image, but not go underneath it when the text flows past the bottom of the image?

CSS:

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
  float: none;
  clear: both;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
  float: left;
}

HTML

<div class="textChunk">
    <img class="leftPic" src="images/joshFace.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Upvotes: 2

Views: 3441

Answers (3)

Koen
Koen

Reputation: 140

Align the image left with html: 

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
}

<div class="textChunk">
    // align="left" added
    <img class="leftPic" src="images/joshFace.png" align="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Upvotes: -1

Airen
Airen

Reputation: 2169

You will try this method. add the overflow:hidden for p element:

p{overflow: hidden;zoom:1;}

you can click here to know any more.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

Try setting overflow: auto to the paragraph:

.textChunk p { overflow: auto; }

This causes a new block formatting context to be created and the left edge of the block will not go beyond the edge of the float (that is, wrap around).

See demo at: http://jsfiddle.net/audetwebdesign/tPC4z/

Upvotes: 9

Related Questions