Designing Liquid Layouts in Net Objects Fusion

Description:

This page is about 500 pixels wide but it expands to fit almost any size window.

To see it in action, maximize your browser window . Then click the "restore down" button and drag handles to decrease viewport. 

Before I tell you how I do it, I want to emphasize that liquid layouts can produce very long lines of text on high resolution displays (1280 ++).  But the beauty is that liquid layouts expand and contract to fit almost any size display. So even if users resize their browsers, your page won't get cut off.

I have seen other tutorials that approach this a little differently. But this is the method that works for me.  Try it and experiment a little to find the layout that works best for you. 

Tutorial:

1. Open a new blank site.
2. In Site view on the Page Properties Palette, name this page Liquid.html and set Master Border to Zero Margins.

3. Switch to Page Design view and draw a text box in the page layout area.  This will become your new page layout area. Hit enter and type some sample text.

4. Click on the edge of the text box and on Text Box Properties Palette enable "Size Layout to Text" and "Contents wrap to browser width."

5. Select Tools on the menu, click Options, Current Site. Select "Regular Tables - All browsers," "CSS" and use "Straight Quotes." Click OK.

6. Insert a 3 row by 2 column table into the text box and drag the handles to fill the text box. Notice that the page margins and right side borders are aligned with the text box and table.

7. Set table properties as shown below: NOTE: you may find it easier to leave the border set to 1 or 2 while you work on your page and then change it to 0 when you are ready to publish.  Deselect Generate non-breaking spaces.

8. Highlight the sample text and paragraph marks in your text box and change font size to -2 or the smallest available style size.
9. Delete the highlighted text and paragraph marks. I do this so the table will meet the text box edges without producing unsightly gaps.

10. Slide page margins to the table's right edge.
11. Right click in the first column to select and set column width to 22% (this makes the left column liquid and scales the column width in proportion to the rest of the screen size). If you prefer to have a fixed width left column, use pixels instead of percentages.
12. Right click in the second column to select and set column width to 78% or 100% of screen size. This scales the page content to fill the browser window.
13. Change background colors of columns or individual cells to match your color scheme.

Tips and tricks:

Problem: The liquid layout isn't working in Preview.

Solution: Preview is not as reliable as doing a Local Publish and checking your site in all the popular browsers, but if your page isn't producing the desired liquid layout, check that your table width and columns (right click to select) are set to percentages (%). Refer to Step 7.

Problem: I can't get the footer to come up.

Solution: Right click in cell and select row. Set row height to "Auto" and set the Vertical alignment to "Top."

Problem: There seems to be a gap caused by line break or paragraph mark somewhere in the layout but I can't see it to remove it.

Solution: Right click to select table and on the image alignment tab of the properties box, click align "Left." You should see the stray paragraph mark. Delete it. Then re-select "Left Wrap" on the properties box. All images in the navigation area should be set to "Left Wrap" too.

Problem: How can I keep text from aligning flush with the right side of the page.

Solution: Right click in a table cell and Insert Column Right.  Right click in columns to select and set to percentages (%). Example, Left 18%, Middle 80%, Right 2%. If needed, you may insert a clearpixel or transparent gif in a right side cell as a placeholder.

That's all there is to it. I hope you found this tutorial informative and helpful.  If you like this layout, be sure to save it and Export as Template