[Pro] Keeping three colums together

How do I prevent the right box of three moving under the other two?

I have a row of three and want to keep them intact that way when the browser is resized. Now they break apart too soon on resizing.

The only way I can prevent this now is to have two left floating boxes and the right one is right floated. It results in not a perfect distribution of the three within its wrapper. So how do I make three same size boxes that are not behaving as moving objects…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m assuming that you are working in a flexible/responsive environment and are using %-based widths. Are you using padding on any of the “column” boxes?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Caleb!

Yes, flex/responsive inline. A did use the % based width.
And yes, padding as well…

I feel there is a good tip coming?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I feel there is a good tip coming?

Soon, but not now.

tl;dr: You need to apply the Box Sizing action to any flexible-width element that uses padding. However, this action is broken under FW 7 at this time and doesn’t work properly.

You see, in the web world, padding actually adds to the width of the element. For example, hand-code a 100px wide <div> with 20px of padding all around. While you would expect the resulting box to be 100px wide with a 60px “usable” area, it actually becomes 140px wide with a 100px usable area.

This gets worse when you are dealing with a flexible environment. Imagine for a second that you created a 100% wide <div>. It works great, until you add 10px of padding. Suddenly, this box is now 100% + 20px wide. Too wide to work.

Freeway attempts to insulate you from this by constraining percent widths when there is padding. This is why FW won’t let you set a box with padding to 100% wide - it will constrain the width to 96% (or something similar) so that 96% + the padding = 100%.

This works fine, as long as the page doesn’t shrink in width. Once it does, the math that Freeway did to work out the width becomes incorrect. A 96% wide element may leave 14px available for padding when it’s 1200px wide, but it will only leave 7px for padding when it is 600px wide, and things will break.

There is a fix though. It’s called box-sizing: border-box. This is a bit of CSS that tells the browser that you want the padding to decrease the usable space of the element instead of enlarging it. Hence, a 100% wide element will be 100% wide, regardless of padding.

You can see this in action here: http://codepen.io/CalebGrove/pen/BIvbm

With Freeway, it’s not quite this simple, as you don’t just need to apply the CSS correctly, but you also need to override the constrained width’s that Freeway spits out with the proper percentages (otherwise, that 100% width box that Freeway constrained to 96% will be just that, 96% wide).

This is why the Box Sizing action is so incredibly useful. Not only does it apply the CSS to the element, it also automatically recalculates the % width so that the box that FW constrained to 96% will be the correct 100%.

However, the Box Sizing action is broken in FW 7. This is why Backdraft is currently stuck in the mud. Joe Billings has told me that an update is in the works, but never gave me an ETA. :confused:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well Caleb, that brings it all into perspective.
I really struggled with the new 7 problems with the Box Sizing action! It went on for 2 days untill I discovered that the action made FW7 hang all the times. So I removed the action and I never realized the formidable caracteristics of the action.

I will try the CSS alternative now and I understand exactly what you mean. Thanks very much. Hope things will change as soon as possible! Joe is certainly reading all these problems of all of us!

On the other hand I have had a intensive FW 7 weekend and the result is I was confident enough to upload my website after migrating from 6. Hope an easy way for changing fonts (smaller for smartphones) will be one of the issues to be solved in a next version.

Still now I wonder how to change the font size of the css menu! I think it is now based on my p or body style. I would like to have a ‘nav’ style which I can apply to the css menu.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options