Liquid design gives text, images, and other layout elements room to resize and flow along with changes in browser width and height. As the user resizes the browser window, liquid designs respond with a flexible layout structure that maximizes available screen space.
Creating liquid designs begins with defining box widths as percentages of their parent widths. For example, a basic two-column layout could look like this:
.main-column {
width: 75%;
}
.sidebar {
width: 25%;
}Percentage-based layouts retain their proportion regardless of browser width, only make sense when other content is flexible as well. Elements like images, forms, and tables may also resize and flow along with changing browser size. Of course, it’s also okay to display fixed-width items such as pull-quotes and side-boxes, as done throughout this website.
As if liquid layouts weren’t awesome enough, you can make them even better by sticking them to the grid. The easiest way to “grid” your layout is to define your horizontal grid and choose a base width for your design. Looking at the xy.css horizontal grid, let’s say we go with a layout of 12 grid-units for a base width of 984 pixels.
... 5 6 7 8 9 10 11 12 ... ... 396 480 564 648 732 816 900 984 ...
Our example layout consists of two columns, but the initial widths are off the grid, so let’s recalculate them. If we go with eight grid units (gu) for the .main-column and 4 grid units for the .sidebar, we get our new liquid-grid widths like so:
column width % = [ column width px ] / [ parent width px ] x 100 .main-column % = 648px / 984px x 100 = 65.853659% .sidebar % = 312px / 984px x 100 = 31.707317%
Rounding these liquid-grid widths to the nearest thousandth, our CSS becomes:
.main-column {
width: 65.854%;
}
.sidebar {
width: 31.707%;
}
Rounding to three decimal places is sufficient for most browsers, but there may be scenarios where more significant figures are required. Including more digits doesn’t mean your design is more accurate, it means that you’re giving more computational control to the browser, rather than doing the calculations yourself. Browsers vary in how they round decimals, so rounding your own can help you find that sweet spot.