What Is the Advantage of Liquid Width Layouts?


In Web page design, liquid width layouts -- also known as fluid width layouts -- are where developers specify the width of the pages' elements, as percentages of the width of the Web browser window where the pages display. The Smashing Magazine website, for example, mainly uses liquid width layouts. This approach offers certain advantages over fixed width layouts, in which the widths of the elements stay the same, regardless of the width of the Web browser window.

Empty Space

  • The fact that liquid width layouts rely on percentage values rather than fixed values means that they are flexible and expand, or contract, to fill the free space in a browser window. This avoids and potentially awkward white space, or empty space, on a Web page and, because the amount of white space is similar, regardless of the browser and the size of the browser window, liquid width layouts create a more visually appealing effect.


  • Liquid width layouts utilize all the free space on a Web page, displaying more content on larger screens and less content on smaller screens. As a result, Web page designers don't need to design for any specific resolution (the maximum number of pixels that can display on a computer monitor screen, usually expressed as the number or rows and columns, in the form 1,024 by 768) -- and Web pages are more user-friendly. If you design them correctly, liquid width layouts can eliminate the need to use horizontal scroll bars on Web pages that display on smaller screens.


  • Liquid width layouts allow precise control over the width of the elements on a Web page. You can solve the problem of liquid width layouts overlapping with fixed width elements, such as sidebars -- which could otherwise ruin the layout of a Web page -- with clever use of what are known as Cascading Style Sheets (CSS). CSS is an extension of Hypertext Markup Language (HTML), which allows you to specify the color, font and particularly the size of certain elements of a Web page.


  • Liquid width layouts allow text and other Web page content to flow, in a natural fashion, without any attempt to control width or line breaks. Proponents of liquid width layouts feel that this in keeping with the nature of Web pages, in general. Furthermore, you can create liquid width layouts -- especially those that don't rely on graphics or difficult techniques -- simply and cleanly, making them easy to maintain as well as easy to use.

Related Searches


Promoted By Zergnet


Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!