Skip to content Skip to sidebar Skip to footer

Css Vertical Float Technique

Is it possible to have a vertical float working by analogy with the horizontal one? In the Html below I'd like the green button to be as it is and the yellow to float to the bottom

Solution 1:

using relative position and and set the bottom as the negative of the box height

http://jsfiddle.net/e9uet/

Solution 2:

If they don't always have to be in top-down 1st-to-last order did you try simple inline-blocks? That should allow them to fill out horizontally and then wrap vertically when not enough space.

.columns.icon { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px }

http://jsfiddle.net/JT3La/

Post a Comment for "Css Vertical Float Technique"