CODEWITHSUNDEEP
css
Razer
Razer

Reputation: 8211

Align paragraphs right to image (without wrapping)

I have a left floating image. How can I align content (multiple paragraphs) to the right, such that the do not wrap at the bottom of the image like the following:

+-----+
|     | Lorem Ipsum
|     | Lorem Ipsum
+-----+ Lorem Ipsum
        Lorem Ipsum

Here is JSFiddle which shows the wrong behaviour. As soon as the image is over, the paragraph wraps. What do I have to change, to get the described result as above?

Upvotes: 0

Views: 42

Answers (2)

Jtwa
Jtwa

Reputation: 143

First create a container with a specified width:

<div class="container">
</div>

CSS

.container{
  width:100%;
}

Let's add to columns, one column will take up 20% of the screen (this column will have the left content) and other column will take up 80% which will have the right content.

<div class="container">

  <div class="col-1-5">
      <p>Random Left Content</p>
  </div>

  <div class="col-4-5">
     <p>Random Right Content</p>
  </div>

 </div>

Let's set all col's to float left and col-1-5 to 20% and col-4-5 to 80%

[class*='col-']{
    float:left;
 }
.col-4-5{
  width:80%;
  background:blue;
}
.col-1-5{
  width:20%;
  background:green;
}

Upvotes: 0

C3roe
C3roe

Reputation: 96316

Setting overflow:hidden is one way to achieve that.

.content { overflow:hidden; }

http://jsfiddle.net/BnQRW/510/

Upvotes: 3

Related Questions