<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>

CC BY-SA 3.0
2016-06-27T12:49:14.337Z
How is this any different from the classical image floats?
Sandwich
CC BY-SA 3.0
2016-06-28T15:48:55.153Z
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.
Damon
CC BY-SA 3.0
2016-06-28T19:16:23.997Z
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... ;)
Sandwich
CC BY-SA 3.0
2015-12-06T20:54:54.013Z
2015-12-06T20:54:54.013Z
Damon
<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>

CC BY-SA 3.0
2015-12-06T21:55:10.863Z
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
RitterKnight
<css><position><layout>
How does one achieve drop-left or drop-right image position?
# 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: 

    


That renders something like:

    


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... ;)  

---

