This page is in response to a message posted through the Freeway Discussion List which discusses the the desire for flexibility, and the frustration in getting Freeway to be flexible. For the record, I do use Freeway Express, am not familiar with it, nor do I intend to discuss its use in this example. Hereafter, whe I refer to Freeway, I mean Freeway 4 Pro.
Now I won’t argue that Freeway's often inflexible way of handling measurements isn’t frustrating to me, nor will I pretend that many aspects of the control interface need more work. What I will argue is that Freeway is a lot more able to make flexible pages than some might think. It merely requires a new way of thinking.
There are four div/boxes on this page. The first is a container to hold the other three. Freeway adds another one in the output — “PageDiv” which you can mostly ignore. After setting the document to 800 x 600, I created the container html box. This is the first div. I made it the size of the working page, then manually set the width to 100%. Then I inserted three html boxes into the container div.
Styling these inserted div/boxes is the tricky part in such a layout. If we add margins or padding, ultimately we affect the width of the div/box. If we use neither of those, then we can set the width of each div/box to 100%, just like the container. If we want a little breathing room, then we must use math so that everything width-wise still ends up at 100%
I set the margins of the top div/box to 15 px above and below, but set the sides to 2% — that’d be 2 percent of the container div I reckon. Then I set the div width to 96% (96+2+2=100). The remaining two div/boxes get no top margin, just 15px bottom and 2% on the sides. Then I set each to 96% width gave them a top and bottom padding amount, but no left/right amount (see my discussion of padding problems in the middle div/box).
After placing some text in each of the three div/boxes, I then set the height of each to none… including the container box. By deleting any entry in the box height measurement, leaving it blank, this will cause the div/box to “shrink up” to fit the content and prevent overflow. Only do this after you’ve placed some content, because without any content the div/box will collapse and disappear from view.
All that was left was styling the background and div/box colors (which you may find visually helpful earlier on). I set the left/right indent of the type since I was too fearful of messing with the side padding. Preview, and all is flexible!
Narrowing the page also narrows the side margins, as they are a percentage of the width, but they never go away and the text stays inside. Resize the text all day long, and everything stays flexible.
This div/box is basically the same as the one above except that left and right padding of 2% was added. This was done after the margins and width had been set to add up to 100%. Freeway automatically reduced the div/box width to 92% (92+2+2+2+2=100) — presumably to keep everything within the containing div. While it works this time, I have had difficulty figuring the padding amount in the near past and I would recommend caution with this part of the equation.
This is the third and last div/box.
NOTE: When I say “div” or “html box” I mean the same thing. Freeway 4 Pro, with CSS Layout (layer) active, treats them the same way.
Download the Freeway 4 Pro file (8k)
Contact me: thebigerns@gmail.com