Combining Fluid and Fixed Columns

When considering 2-column web page layouts, one possible constraint is whether one or more elements on the page will have fixed width(s) and/or have a minimum width requirement.

Generally, when a responsive page needs to accommodate one or more fixed elements such as say, 300x250 ads, it is necessary to allow fluid elements to shrink or grow while the fixed elements stay fixed. The goal is an experience that renders nicely across mobile, tablet, laptop, and desktop viewports.

Below are two sets of two identical examples created two different ways. If you are viewing via a wider browser window, the first set of examples (all the colored boxes) will display two rows demonstrating fixed-then-fluid column order and the second row, the reverse, fluid-then-fixed column order. This first set (in color) was built using CSS floats. The second set (in monochrome) was built using CSS flexbox and demonstrates the same look and feel as the first set, with a different coding approach.

320px seems to be the current minimum width for mobile page designs. On iPhone 6 Plus for example, this page should render the columns stacked for portrait orientation and horizontally (side-by-side) for landscape orientation. Other phones may vary depending on their devise pixel ratio.

Examples Using Floats

Fixed!

Fluid!

Fluid!

Fixed!

Examples Using Flexbox

Fixed!

Fluid!

Fluid!

Fixed!