Liquid Layout Demo: Flexible Page Behavior in DFM2HTML

DFM2HTML is fundamentally a fixed-canvas desktop editor, but the HTML and CSS it exports can be extended to produce fluid, flexible layouts that adapt to different screen widths. This page demonstrates the techniques involved, covers what "liquid" or "fluid" layout means in the context of a static site, shows how percentage-based column widths work in DFM2HTML output, and addresses the practical considerations around responsive images and viewport behavior. This is not a complete responsive design guide. It focuses specifically on what is achievable within the DFM2HTML workflow and what approaches require editing the exported CSS outside the editor. You will find working layout examples, annotated CSS patterns, and links to the template library and the demos section for broader context.

What Liquid Layout Means Here

The term "liquid layout" predates the current vocabulary of responsive design. It describes pages where the main content column or columns are sized in percentages rather than fixed pixel values. A liquid layout stretches wider on a large monitor and narrows on a smaller one, all without media queries or JavaScript. It is the simplest form of width adaptation and it works reliably because it relies on the browser's own box model rather than JavaScript calculations.

DFM2HTML's canvas is pixel-based, so layouts designed in the editor start as fixed-width. Converting a fixed layout to a fluid one means editing the exported CSS to replace pixel widths on the main container and column elements with percentage values. The visual result in most cases is close to what the editor showed, because the proportions are preserved even when the absolute values change.

Setting Up a Fluid Main Container

The most impactful single change to make a DFM2HTML page more flexible is to give the main container a percentage width and a maximum width. The exported CSS for a typical DFM2HTML layout might have a rule like this:

.page-wrap {
  width: 900px;
  margin: 0 auto;
}

Replacing this with a fluid rule makes the page adapt to its viewport while capping the maximum width to preserve readability on large screens:

.page-wrap {
  width: 94%;
  max-width: 900px;
  margin: 0 auto;
}

This single change means the page no longer creates a horizontal scrollbar on viewports narrower than 900 pixels. The content column compresses gracefully. At 94% width with auto margins on both sides, the page retains a small margin on the narrowest mobile displays.

Fluid Column Layouts

Two-column layouts like Template 2 require more careful handling. The two columns each need a width that, when added together with any margin between them, does not exceed 100% of the parent container. A common pattern is to set the main content column to roughly 65% and the sidebar to roughly 30%, with the remaining 5% handled as margin or gap.

.main-col {
  width: 65%;
  float: left;
}

.sidebar-col {
  width: 30%;
  float: right;
}

This produces a two-column layout that scales proportionally with the page width. On small screens where both columns at those percentages would be too narrow to read comfortably, a media query can stack the columns vertically:

@media (max-width: 600px) {
  .main-col,
  .sidebar-col {
    width: 100%;
    float: none;
  }
}

The breakpoint at 600 pixels is a starting point, not a rule. The right breakpoint for any specific layout is where the columns become uncomfortably narrow, which varies with the content and font size.

Responsive Image Handling

Images in a fixed-width DFM2HTML layout are placed with explicit pixel dimensions. Converting to a fluid layout means images must be able to shrink when the column narrows. The CSS fix is simple:

img {
  max-width: 100%;
  height: auto;
}

This rule makes all images scale down to fit their containing column but never scale up beyond their natural size. The height: auto declaration preserves the aspect ratio as the width decreases. Apply this rule globally in the exported stylesheet and it handles all images without requiring individual fixes.

For a thorough treatment of responsive layout and image performance in modern static sites, the web.dev guide to responsive design and layout covers the underlying principles and practical patterns in depth.

Frame-Based Templates and Fluid Behavior

The frame-based templates, Template 4 and Template 7, use HTML framesets to divide the browser window. The frame proportions are defined as percentages in the frameset declaration, which means they adapt to the browser window size automatically. In this sense, frame-based layouts are already fluid by default. The persistent navigation frame stays at its defined percentage of the window width, and the content frame occupies the rest.

The limitation is that the content within each frame is still a standard HTML page with its own fixed or fluid layout rules. Applying the fluid techniques described above to the content pages within a frame-based site produces the same results as applying them to standalone pages.

What This Approach Does Not Cover

Fluid layouts as described here handle width adaptation well. They do not address all aspects of what modern responsive design involves. Complex navigation restructuring for touch devices, touch target sizing, print stylesheets, and high-density display handling each require additional work beyond the techniques on this page. The JavaScript menus page covers touch navigation specifically. The tutorials section has a publishing path that includes pre-publish testing recommendations.

Working Through the Demo

The layout examples in the demos section include fluid layout previews alongside fixed-width examples. Comparing the two side by side illustrates exactly what changes between the approaches and helps you decide which technique is appropriate for your specific site. The layout gallery shows fluid layout techniques applied to realistic site structures.