How do I make the text wrap around the image?

Question

I am designing a blog and I am using CarrierWave and MiniMagic for image file upload. As of now, each article displays a picture at its top. I first tried to resize the picture to a rectangular shape but it seems that even when I change the dimensions under resize, the picture is always displayed as a square. Now, I am trying to wrap the text around the image. More specifically, I want the the image to be displayed at the top-left of the article and the text to be on the right of the image and under the image :

-IMAGE---- -----TEXT-------

---

---

---------TEXT--------------

---

Here is my articles index view :

<%= will_paginate %>
 <% @articles.each do |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 a New Article", new_article_path, class: "new_article" %>
 <% end %>
 </h6>

Here is my 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 is my file uploader:

class PictureUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
 # include CarrierWave::RMagick
 # include CarrierWave::MiniMagick
 # Choose what kind of storage to use for this 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 the directory where uploaded files will be stored.
 # This is a sensible default for uploaders that are meant to be mounted:
 def store_dir
 "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For 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 as they are uploaded:
  # process :scale => [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end
  # Create different versions of your uploaded files:
  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end
  #Add a white list of extensions which are allowed to be uploaded.
  #For images you might use something like this:
  def extension_white_list
  %w(jpg jpeg gif png)
  end
  #Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #"something.jpg" if original_filename
  #end
  end.

How do I get the image to be at the top left, the text at the top right, bottom left and bottom right of the page such that the text wraps around the image ? Is it possible to resize the image with a rectangular shape ? How do I do that with CarrierWave ?

Answer 1

If the image is in a p tag you just float it to the left.

CSS

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

I made a JSFiddle for you.