Karen Engel Photography Headshots Portrait Family Business Editorial Bakersfield

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.