Answers.Body: <p>Generally, I'll have a div that picks up on the position's value. </p>
  
  <p>For example: </p>
  
  <pre><code>&lt;div class="image-{{ entry.myPositionHandle }}"&gt;
      &lt;img src="my-image.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That renders something like:</p>
  
  <pre><code>&lt;div class="image-left"&gt;
      &lt;img src="my-image.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I'll have a css rule like this:</p>
  
  <pre><code>.image-left img {
      float:left;
  }
  </code></pre>
  
  <p>It's also important to note where you place this element in relation to your text. You many need to put the image call before or after your text.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-27T12:49:14.337Z
Answers.Text: How is this any different from the classical image floats?
Answers.UserDisplayName: Sandwich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T15:48:55.153Z
Answers.Text: It's pretty much the same, only using the position field makes it really easy and nice for the end user to choose how to position the image. They shouldn't have to care how it's doing it - other than if I click the left position, the image will be on the left, text wrapping around it.
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T19:16:23.997Z
Answers.Text: Ok, but the question is how to achieve the `drop-left` and `drop-right` positioning specifically, as opposed to the `left` and `right` positions. Supplying code for achieving the latter does not answer the former... ;)
Answers.UserDisplayName: Sandwich
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-06T20:54:54.013Z
Answers.LastActivityDate: 2015-12-06T20:54:54.013Z
Answers.UserDisplayName: Damon
Body: <p>How is one to achieve the layout visualised by Craft's drop-left and drop-right icons? </p>
  
  <p><img src="https://craftcms.com/assets/images/docs/field-types/position-select/_383xAUTO_crop_center-center/position-select-settings.2x.png" alt="Craft's Position Select icons"></p>
  
  <p>I feel dumb asking but I don't know of any way to have a <strong>floated image</strong> stick to the <strong>bottom</strong> of its sibling text node with text running around it <strong>above and to the side</strong>, which is what is implied by the icons.</p>
  
  <p>What have I been missing all these years?!</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-12-06T21:55:10.863Z
Comments.Text: I'd look into inline-block or table-cell based CSS depending on how you're laying it out.  http://stackoverflow.com/a/26944290/496591
Comments.UserDisplayName: RitterKnight
Tags: <css><position><layout>
Title: How does one achieve drop-left or drop-right image position?
ThreadText: # How does one achieve drop-left or drop-right image position?
  
  (Asked by: username_0 on 2015-12-06)
  
  How is one to achieve the layout visualised by Craft's drop-left and drop-right icons?
  
  ![Craft's Position Select icons](https://craftcms.com/assets/images/docs/field-types/position-select/_383xAUTO_crop_center-center/position-select-settings.2x.png)
  
  I feel dumb asking but I don't know of any way to have a **floated image** stick to the **bottom** of its sibling text node with text running around it **above and to the side**, which is what is implied by the icons.
  
  What have I been missing all these years?!
  
  **Tags:** css, position, layout
  
  > **Comments:**
  > **username_1**: I'd look into inline-block or table-cell based CSS depending on how you're laying it out.  http://stackoverflow.com/a/26944290/496591  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2015-12-06. Score: 2
  
  Generally, I'll have a div that picks up on the position's value.
  
  For example:
  
  ```
  <div class="image-{{ entry.myPositionHandle }}">
      <img src="my-image.jpg">
  </div>
  
  ```
  
  That renders something like:
  
  ```
  <div class="image-left">
      <img src="my-image.jpg">
  </div>
  
  ```
  
  Then I'll have a css rule like this:
  
  ```
  .image-left img {
      float:left;
  }
  
  ```
  
  It's also important to note where you place this element in relation to your text. You many need to put the image call before or after your text.
  
  > **Comments:**
  > **username_3**: How is this any different from the classical image floats?  
  > **username_2**: It's pretty much the same, only using the position field makes it really easy and nice for the end user to choose how to position the image. They shouldn't have to care how it's doing it - other than if I click the left position, the image will be on the left, text wrapping around it.  
  > **username_3**: Ok, but the question is how to achieve the `drop-left` and `drop-right` positioning specifically, as opposed to the `left` and `right` positions. Supplying code for achieving the latter does not answer the former... ;)  
  
  ---
  
  