CSS - how to float an image right AND center vertically
This is really a pure CSS question, and I'm going to state it in pure CSS terms. The reason I'm asking about it here is because it's actually to solve a problem with jQuery Mobile listviews - or, actually, my hand-rolled replacement for jQuery Mobile Listviews. ('ll be creating some sort of tutorial on using this once I am done, and will announce it here. Maybe the solution could ultimately be incorporated into the JQM listview, if there is a good cross-browser solution.
It seems rather simple on the surface, but I don't think there is an easy solution. If there was, I supposed they'd have used it in the listview already.
I only need to solve this for WebKit, BTW, though I'm sure others would love to know how to do it on other browsers.
It's rather simple. I have several lines of text, inside of multiple simple inline tags. They might be <div>, <p>, etc. It's an arbitrary number of lines of text. Actually, there might be blocks as well, but let's keep it simple for now, and just say it is just text.
Now, I have an image that I want to float right, and I want the text to wrap around the image.
Now, that's great if I want the image in the upper right-hand corner.
But I want the image to be centered vertically. Keep in mind, I do not know in advance the height of the text.
The quick brown foxed jumped right over the lazy dog's back.
The quick brown foxed jumped right over the lazy dog's back.
The quick brown fox jumped right over ------------------------------------
the lazy dog's back. The quick brown fox | |
jumped right over the lazy dog's back. | |
The quick brown fox jumped right over the| |
lazy dog's back. The quick brown fox -------------------------------------
jumped right over the lazy dog's back. The quick brown fox
jumped right over the lazy dog's back. The quick brown fox
All the CSS float tutorials I have found so far carefully avoid this one scenario, for reasons unknown. ;)
Now, if you imagine that the picture is the right-arrow button on the listview, you will understand where I am going with this.
The listview has a block element to the right that holds the right-arrow button. This cuts-off the content of list items unnecessarily, making the space above and below the button unusable. I've always disliked having to tolerate that wasted space.
I have kludged this in some cases where I know, for example, that the first line will be long, so I will write some CSS to allow it to spill-over, knowing that since it is the first line, and I have some minimum number of lines, I know that it will never conflict with the button.
I've also kludged this by making a list item position:relative and then using position:absolute for the button and using the trick to stretch to top:0 bottom:0. But that removes the button from the flow, and so there is no wrap-around. (All this does is avoid the need for negative margin to make use of the extra space.)
But I want a more general solution, that will allow content of any height within a list item to wrap around the arrow button, while still keeping the button vertically-centered.
I am pretty certain that this HAS to use a float, because the inline content has to flow around the image.