Random CSS Thought: Vertical-float
Vertical floating is an idea I’ve had for some time now, but only recently really had a need for. Float:left;
and float:right;
are often used to float images or clear certain parts of the background, making the text flow nicely around it. And it’s used for good reason, it is a whole lot cleaner then manually putting <br />
tags at the end of each line of text.
Why only horizontal?
A couple of weeks ago, I was working on a website that had an image on the side which a portion of the text had to wrap around. Only, the image I wanted to clear was located in the lower right corner. I tried a couple of things, but in the end the only solution I had was to use <br />
tags to make sure the lower lines of text floated nicely around the image. After feeling reasonably ashamed for at least an hour, I began thinking about how I would like to see it done. So I came up with this solution:
Floating or sinking?
A short interruption with horrible pun, but we now continue with the article. Most CSS attributes have both a horizontal and vertical value. for example, background-position
, margin
, padding
all give you the ability to select a horizontal and vertical value. It would be very useful to be able to use a vertical float value as well:
#foo {
float:right bottom;
}
This should then result in the element floating in the lower right corner of it’s parent element, giving you the ability to float something, but measuring from the bottom upward. (Like how float:right
gives you the ability to measure something starting from the right.)
I also thought about a vertical-float
attribute, but that really is too much to write, and I quite like the simplicity of the above example. (Fine, so call me lazy. I’d like to call it efficient.)
Discussion
This would seem fairly easy to implement. I have quite some uses for it. how about you?
Other CSS thoughts
If you enjoyed this article, please consider reading any of my previous CSS thought articles:
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Related articles
CSS & HTML Design , 4 January 2017If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
Apps , 18 June 2016 It’s important for FromScratch to be able to support different contexts. …
CSS & HTML , 25 January 2019For a long time I’ve wanted to like functional CSS systems like Tachyons and Tailwind. The concepts behind them are really appealing to me. Using short names for CSS property:values saves a lot of typing (hello Emmet, nice to see you again!), but more importantly by limiting the amount of design choices you can make,…