Float images to the left or right in Bartik

Once you have created a subtheme of Bartik, you may float images to the right or left in nodes by adding the following CSS:

Float images to the right

In your subtheme.css file, add the following CSS to the bottom of the page:

/* ----------------- Image fields ----------------- */

.node .field-type-image {
  float: right; /* LTR */
  margin: 0.5em 0 1em 1em; /* LTR */
}
.node .field-type-image img {
  display: block;
  padding: 0 0 10px 0;
}
.node .field-type-image.field-label-above {
  margin-top: 0;
}
.node .field-type-image .field-label {
  margin-bottom: 0.5em;
}
.node .field-type-image.field-label-inline .field-label {
  margin-bottom: 0;
  line-height: 1;
}

And, in your subtheme's style-rtl.css file, add the following CSS to the bottom of the page:

/* ----------------- Image fields ----------------- */

.node .field-type-image {
  float: left;
  margin: 0.5em 1em 1em 0;
}

Float images to the left

In your subtheme.css file, add the following CSS to the bottom of the page:

/* ----------------- Image fields ----------------- */

.node .field-type-image {
  float: left; /* LTR */
  margin: 0.5em 0 1em 1em; /* LTR */
}
.node .field-type-image img {
  display: block;
  padding: 0 0 10px 0;
}
.node .field-type-image.field-label-above {
  margin-top: 0;
}
.node .field-type-image .field-label {
  margin-bottom: 0.5em;
}
.node .field-type-image.field-label-inline .field-label {
  margin-bottom: 0;
  line-height: 1;
}

And, in your subtheme's style-rtl.css file, add the following CSS to the bottom of the page:

/* ----------------- Image fields ----------------- */

.node .field-type-image {
  float: right;
  margin: 0.5em 1em 1em 0;
}

Read more about the reasoning behind this code, which has been submitted by Jeff Burnz, and plans to upgrade float tools in Drupal 8 core at the following thread: Float images in Bartik articles.