Karen Engel Designs

This is a Header, a self-contained section

It’s parent is the PageHed element, which stretches across the available width of the browser and whose height is flexible to allow it to fit the elements within it. It’s purpose is to contain all the different header elements.

Inside of the PageHed element is the PH-content element. I's purpose is to separate specific header content from the container element and center it in the browser. It does this by also stretching across the available width of its parent container to a maximum width of 960px and an alignment of Center. When I added padding to the element, Freeway Pro automatically adjusted the settings for me, keeping it all perfect. This div is also vertically flexible with a minimum height setting to make sure it is never less than 70px tall.

One thing about flexible inline layouts to keep in mind is that sometimes it is hard to visually distinguish an outer box from an inner box – leading to confusion or frustration thrying to select specific items. The easiest way around all that is to use the Site / Page pane at the left of the workspace. Selecting a page item from the list will cause the associated element to also be selected.


This is the Content area, another self-contained section

It also consists of and outer div - PageContent - which reserves the browser space with an available width setting and flexible height setting. Inside is the div PC-content, which holds the text and image content. It is horizontally flexible, set to a max-width of 960px and aligned to Center, while vertically set to a minimum height to keep from collapsing too far when there is not enough content.

Still more divs can be added inline to this section, using floats and other advanced positioning tools to creat columns and other complex layouts. If this is your first hands-on with an inline layout, i’d suggest holding of until you’re proficient with this.

The Footer is the last self-contained inline section

Just like in the previous sections, this consists of an outer/inner div structure in the same flexible setup. It will grow and shrink with the contents, and can hold other inline divs to create more complex layouts.

My trick with footers like this is that they are transparent - they get their color from the window background. The PageContent and PageHed elements have their own background color, creating the typical vertically-sectiond appearance that is popular with some websites. Different colors applied to various elements of this layout can create a variety of visual appearances.

Bonus: See how the content reflows when you narrow the page width… that’s right! Inline layouts are the first step to creating a responsive layout in Freeway Pro. So, download and learn it!

built with Freeway Pro 6 by Ernie Simpson, aka The Big Erns