Foundation float classes in fundamental on a freeform layout?

Permalink Browser Info Environment

I am trying to divide an area into two, which is a two-column freeform layout spanning the entire width.

On the left hand side is a blue layout and on the right hand side is white (I will refer to them as blue side/white side going forward).

I want to be able to have the content of the blue and white columns hug the demarcation line of the two columns. The right side (white side) is easy. It's done by default and I only need to add some padding to make it fall the way I want it. The blue side is more difficult (only because I've never done it on this site before). I was thinking about trying out foundations float classes on this column so that it would butt up against the right side of the column, but either I am not doing it correctly (adding float-right to custom css class for the column), applying it in an incorrect place (column vs block vs area), or it isn't supported.?.

What can I do to make the content of a left-side column float to the right of that column (not to be interpreted as a right-aligned text entry)?

Attached is a screenshot of a site (not C5) doing something similar to what I am looking to do (Full width columns, but I want my content to hug the column separation and have text follow the site's standard format [title center-aligned, and paragraph text justified], not the left or center [as the first screenshot shows]).

The second screenshot shows where I am at in the process with a drawing of where I'd like that content to be :). I am not asking for CSS code help from you guys, but an affirmation that it is possible and whether or not it should be placed on a certain element to make it happen.

I peaked over at the documentation to find Foundation classes supported but am having some difficulty finding that info (but that's probably just me not navigating well).

Thanks for the great themework guys.

2 Attachments

Type: Discussion
Status: In Progress
View Replies:
bayleafmedia replied on at Permalink Reply 1 Attachment
I decided to do this purely with CSS on some nested columns.

Here is the CSS i used and applied to my area:

height: 100%;
background: linear-gradient(90deg, #3b5998 50%, #ffffff 50%);

attached is a screenshot of the result (the page is a work in progress so dont judge :) )

I thought I'd give an update.
bayleafmedia replied on at Permalink Reply
So I take this back. When to blocks break for a mobile device the background is still 50/50. I should have known that.

Now I am back to where I was. Is it possible to float column contents. I'm sure I'm just missing something here.


concrete5 Environment Information

I have one

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:58.0) Gecko/20100101 Firefox/58.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.