- This topic is empty.
February 18, 2016 at 3:05 pm #238153
If you look at this image:
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.February 18, 2016 at 4:03 pm #238154bearheadParticipant
This is how I would do it:
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.February 19, 2016 at 12:11 am #238157Paulie_DMember
Simply put this is a
tableof 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.February 19, 2016 at 8:23 am #238173
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!February 19, 2016 at 8:26 am #238174
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 matterFebruary 19, 2016 at 8:59 am #238179Paulie_DMember
But it IS a table…details and a price.
Flexbox can achieve the same result as CSS tables but there is no
float:bottomthat 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
- The forum ‘CSS’ is closed to new topics and replies.