floated span in a div – text not flowing around it, forcing a new line instead.

[pierrebalian]

If you look at this image:
http://imageshack.com/a/img923/7157/U0Q9ZA.png

You can see the first menu item looks as it should, the price is on the last line and floated to the right. This is a simple span class inside of a p.

On the second menu item, you can see when text is longer it forces the span onto a new line and the price now appears UNDER the text.

I want the span to ALWAYS be on the same line as the last line of text.

I have tried everything i can think of with no luck so far.

[bearhead]

This is how I would do it:
http://codepen.io/kvana/pen/xZNRyK

try adding text to the paragraph to see how the price will stay with the last line of the paragraph

it will require you to wrap the p in a div, and then make the span a sibling of the p instead of a child of it.

[Paulie_D]

Simply put this is a table of information with prices so table formatting is probably the best option

Whether you use an actual table or CSS tables is up to you.

Flexbox can do this too but that seems like overkill for something so simple.

[pierrebalian]

This does work, however the price essentially just creates a column the full height of the div. The text doesn’t flow around the price at all.

For now I will run with it, its better than anything I came up with. However it would be nice if the text flowed around the price.

Thanks for your help!

[pierrebalian]

I’m trying to avoid tables for this. As a generally rule I only use tables as a last resort.

Could you demo how the flexbox would work? my code is already convoluted so if it gets a little larger it doesnt really matter

[Paulie_D]

But it IS a table…details and a price.

Flexbox can achieve the same result as CSS tables but there is no float:bottom that can wrap text around at span a the bottom right / left.

You could fake it though but frankly it’s a lot of work for something that should be a table

http://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around

[Author]

Posts