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.
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:
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.)
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:
Background-repeat is an often used method of making smaller images possible while creating a filling background. But in my eyes it is far too limited. You could do much more with it: Checkerboard patterns To make these you have to make an image with at least 4 blocks, and then repeat that. What if you could control…
CSS is a great markup language, but it is also (relatively) young. There are a lot of little things that could be improved, and I have been collecting them on this blog. This time, I am proposing an attribute repeat-possibility. Multiple selectors CSS has an excellent way to apply the same style to different selectors: #foo, .bar {background :…
After some debate with Prashant from Mintpages, we came up with a new utopia in CSS design. Now, this is just a random thought, but wouldn’t it be awesome to be able to use (simple) mathematics in your CSS? I’m not talking about “new techniques” or anything, just about closing your eyes and imagining all…
Without looking at any potential technical drawbacks there might be, I fully agree with this one. Something like this really should have been there in the first place, because the problem is just begging for a clean solution. I can’t believe that the CSS spec. authors never even considered the problem this would solve, so I wonder if it was just too technically awkward to implement.
Another thing for CSS 3.1, maybe? ;)
I love the idea. It would make header and footer images so much easier to align, instead of worrying negative margins, etc.
You’re on a roll, Kil :D
Sweet idea Kilian! And why can’t I use rel attrs in link tags on your blog? :p
*hides behind his #1 excuse*
Once I get my custom design done, I’ll add it in :)
i assumed it did exist…i mean it’s such a basic basic concept…i found this page while trying to find whether there was such as thing as float:below or sink etc.
I was looking for something like this too, and found a solution.
In my case, I needed it to float left down. When I used float and clear, I got the results I wanted :D
Would be decent yeah… I wanted to vertically float something at the bottom right of a table cell earlier… you can’t absolutely position it because the table repeats with different data-base driven content or different sizes!
So i’ve had to drop what I wanted and resort to something else
It can’t be done. The browsers are implemented to, unless told otherwise, determine element heights dynamically based on width. The vertical float property would work if the height of the container were static or could be determined at all times, but that’s not the case. I heard this discussion somewhere from people who understood the depth of the problem.
@Mario Aguilera – everything CAN be done! we might not know HOW to yet, but it can be done!!
Imagine what people thought of a TV or computer at some stage… you wanna tell me you can’t float a CSS element to the bottom… :)