css - How do I make the text wrap around the image? -

i designing blog , using carrierwave , minimagic image file upload. of now, each article displays picture @ top. first tried resize picture rectangular shape seems when change dimensions under resize, picture displayed square. now, trying wrap text around image. more specifically, want the image displayed @ top-left of article , text on right of image , under image :

-image---- -----text-------

---

---

---------text--------------

---

here articles index view :

<%= will_paginate %>  <% @articles.each |article| %>  <div class="container1">  <h4><%= link_to article.title, article_path(article) %></h4>  <%= image_tag article.picture.url if article.picture? %>  <p>  <%= article.body %></p>  <p><small><strong> date:</strong> <%= article.created_at.to_s %></p></small>  </p>  </div>  <br>  <br>  <% end %>  <%= will_paginate %>  <h6>  <% if logged_in? %>  <%= link_to "create new article", new_article_path, class: "new_article" %>  <% end %>  </h6> 

here css styling:

@import "bootstrap-sprockets"; @import "bootstrap"; /* mixins, variables */ /* universal */ html { overflow-y: scroll; } body { padding-top: 60px; position: relative; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; h1 { margin-bottom: 10px; } } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.2em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: #3bb9ff; } p { font-size: 1.1em; line-height: 1.7em; } /*  footer{ background-color: #222; div ul li{ display:block; vertical-align: top; width: 50%; float: left; } } */ @mixin box_sizing { -moz-box-sizing:    border-box; -webkit-box-sizing: border-box; box-sizing:         border-box; } /* miscellaneous */ .debug_dump { clear: both; float: left; width: 100%; margin-top: 45px; @include box_sizing; } /* forms */ input, textarea, select, .uneditable-input { border: 1px solid #bbb; width: 100%; margin-bottom: 15px; @include box_sizing; } input { height: auto !important; } #error_explanation { color: red; ul { color: red; margin: 0 0 30px 0; } } .field_with_errors { @extend .has-error; .form-control { color: $state-danger-text; } } /* articles */ .container1 { opacity: 0.75; border: 1px solid #000000; border-radius: 10px; padding: 30px 75px 75px 100px; overflow: scroll ;  }  .container2 {  position: fixed;  padding: 0px 75px 20px 100px;  clear: both;  background-color: #ffffff; /*#f8f8f8;*/  border-radius: 5px;  overflow: scroll;  } 

and here file uploader:

class pictureuploader < carrierwave::uploader::base # include rmagick or minimagick support:  # include carrierwave::rmagick  # include carrierwave::minimagick  # choose kind of storage use uploader:  storage :file  # storage :fog  include carrierwave::minimagick  process resize_to_limit: [660, 660]  if rails.env.production?  storage :fog  else  storage :file  end  # override directory uploaded files stored.  # sensible default uploaders meant mounted:  def store_dir  "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"   end   # provide default url default if there hasn't been file uploaded:   # def default_url   #   # rails 3.1+ asset pipeline compatibility:   #   # actioncontroller::base.helpers.asset_path("fallback/" + [version_name,        "default.png"].compact.join('_'))   #   #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')   # end   # process files uploaded:   # process :scale => [200, 300]   #   # def scale(width, height)   #   #   # end   # create different versions of uploaded files:   # version :thumb   #   process :resize_to_fit => [50, 50]   # end   #add white list of extensions allowed uploaded.   #for images might use this:   def extension_white_list   %w(jpg jpeg gif png)   end   #override filename of uploaded files:   # avoid using model.id or version_name here, see uploader/store.rb details.   # def filename   #"something.jpg" if original_filename   #end   end. 

how image @ top left, text @ top right, bottom left , bottom right of page such text wraps around image ? possible resize image rectangular shape ? how do carrierwave ?

if image in p tag float left.

css

.container1 p img {     float: left;     margin-right: 15px;     margin-bottom: 15px; } 

i made jsfiddle you.