Float stacks left/right?

1

In UIkit3 there is a really handy utility stack that has a float left/right option. It essentially wraps the content (any stack) with the float css. I’m trying to do the same thing with some stacks in another framework, but not getting far.

I’ve tried the obvious; create a class of float-right and add it to the stack using the custom css option, then setting up the class along the lines of .float-right { float: right; } but it’s not working.

What I’m trying to do is to get two elements to sit on the same row side by side, over to the right of the page. I know I could just use a col stack, but that’s adding a lot of needed weight to the page (I think) when in theory a simple float-right instruction would work.

Anyone any ideas for doing this?

EDIT: The above actually worked, I just had an error in the code. But, the elements (stacks) are still on separate rows. Any idea how to have them float on the same row?

2

If you’ve done it correctly then anything floated will be on the same row however the order will be reversed from what you probably expect.

You could do it better using flex box which not only allows you to control the order should you wish but will mean you don’t mess up following content by introducing the bug due to non clearing floats and thus have to implement the clear fix hack. (Google it)

Here are both ways to do it.

1 Like
3

I actually knew about the wrong order thing, and the clearfix hack. Taught by the best. Well, you and a few others. I’m sure you’re all the best at summit ;-)

I think there was maybe something in the stack itself that was forcing even floated things to drop to the new row. I’ll give the flex thing a try.

Thanks.

EDIT: LOL at classes ;-)

4

stacks wrappers are display block, width 100%, margin auto etc which will mess things up

1 Like