1

What I want to do is shown by the "Float Right" illustration in this drawing that opens the post at https://css-tricks.com/all-about-floats/ :

graphic of float left and float right

I want to place an image at the end of a block of text, so that the bottom of the image lines up with the baseline of the last line of the text, pushing up into the text and the text flowing around it.

Using the float:right instruction though, the best I've been able to achieve is an image that hangs off the bottom of the paragraph, not one that pushes up into it, as shown in the illustration.

There are description on how to use float:left in many places but nothing I found in the CSS-TRICKS post, on here, or elsewhere explains how to achieve the positioning and wrapping of text around the image using float:right - which is what I'm trying to achieve.

Does anyone know how to do it?

1 Answer 1

0

In short, you cannot accomplish that exact appearance you are seeking without some markup changes, either with a left or right float.

The reason that the left float works on the first image is that a floated element will have the block level content following it "flow" around it. If you started with a right float on that first image the same effect would be achieved. So when you put an image at the very end of your block-level content (paragraphs), there is nothing to flow around it.

You can achieve a similar look by outputting the last image while there is still some content remaining. For example:

https://codepen.io/andrewborem/pen/PjyNyY

Relevant Code:

div {
  max-width: 750px;
  margin: 0 auto;
  font-size: 1.125em;
}

img.left {
  float: left;
  margin: 0 0.5em 0.5em 0;
  line-height: 0;
}

img.right {
  float: right;
  margin: 0.5em 0 0.5em 0.5em;
  line-height: 0;
}
<div>
  <img class="left" src="https://placehold.it/400x300" />
  <p>Bacon ipsum dolor amet tenderloin sirloin pork belly alcatra, flank cow pig. Chicken rump andouille bacon, turkey strip steak pastrami salami chuck shank flank ball tip. Pork belly doner salami alcatra tail strip steak. Tongue boudin leberkas brisket
    burgdoggen capicola tri-tip corned beef filet mignon pancetta strip steak short ribs. Biltong drumstick jerky, filet mignon bresaola t-bone sirloin tail pig. Meatball sirloin burgdoggen tail t-bone.</p>
  <p>Ham jerky bacon ground round, pork tongue fatback landjaeger short loin flank brisket ribeye cow. Jowl capicola flank shoulder strip steak spare ribs pig boudin. Burgdoggen beef ribs kevin meatball frankfurter turkey pork loin ground round capicola
    shoulder ribeye t-bone cow prosciutto boudin. Porchetta rump bacon swine, hamburger ham hock beef ribs picanha turkey leberkas. Venison pork ham, biltong bacon prosciutto spare ribs pig picanha capicola. Pastrami pancetta bresaola chuck biltong venison.
    Leberkas chicken pastrami shoulder, turducken drumstick spare ribs picanha capicola pancetta rump salami tail t-bone.</p>
  <p>Picanha doner burgdoggen sausage. Corned beef pork belly alcatra, ground round beef ribs tenderloin ball tip pork loin pig hamburger pork chop tri-tip brisket. Jowl doner tail shankle venison frankfurter. Spare ribs pig chicken t-bone. Beef sirloin
    tongue picanha pork capicola fatback, meatball boudin porchetta shank tri-tip pork belly.</p>
  <img class="right" src="https://placehold.it/400x300" />
  <p>Leberkas chicken short loin kevin tri-tip kielbasa ham hock meatball, ball tip ground round tongue filet mignon. Venison tongue pork belly pig. Kielbasa short ribs sirloin venison alcatra hamburger bacon boudin. Pork ball tip brisket strip steak pig,
    pork loin turkey jowl kevin spare ribs tenderloin. Landjaeger sirloin spare ribs ribeye ball tip, venison shank bresaola chicken pork loin doner shoulder jowl shankle pastrami. Shoulder tri-tip pork loin swine, leberkas salami ground round bresaola
    pastrami kielbasa chuck chicken.</p>

  <p>Pancetta tail sirloin corned beef frankfurter burgdoggen kielbasa leberkas chicken chuck meatball pork belly flank venison. Porchetta shankle capicola, strip steak biltong alcatra pastrami. Frankfurter shankle drumstick tail, pancetta pork belly andouille.
    Ball tip pancetta strip steak venison pork loin hamburger. Drumstick landjaeger cupim, ham hock boudin beef kielbasa pancetta pig.</p>

</div>

The caveat here is that if you are using a CMS to input this, and end up creating an article with two images that only has three paragraph elements, the output is going to look pretty broken. Alternately, if you have two extremely long, or extremely short, paragraph elements that follow the last image, it is not going to behave exactly as expected.

1
  • 1
    Thanks Andrew. fwiw, at first I rejected your answer, for pretty much the same issues as you note, BUT having slept on it, it has answered my particulr implementation: a design markup for quotes. As long as the closing (float: right) image is large enough, and the lines of text not too long, I can insert the image almost anywhere towards the end and the text left over will wrap. D'oh! I'd being looking for something tidier and overlooked the fact that there was actually no need for code-tidiness in this case at all. So, thanks for the "Whack on the Side of the Head"!
    – talvi
    Commented Jul 9, 2017 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.