Home : Internet Terms : Fluid Layout Definition

Fluid Layout

A fluid layout is a type of webpage design in which layout of the page resizes as the window size is changed. This is accomplished by defining areas of the page using percentages instead of fixed pixel widths.

Most webpage layouts include one, two, or three columns. In the early days of web design, when most users had similar screen sizes, web developers would assign the columns fixed widths. For example, a fixed layout may include a main content area that is 960px wide with three columns that have widths of 180px, 600px, and 180px. While this layout might look great on a 1024x768 screen, it might look small on a 1920x1080 screen and would not fit on a 800x600 screen.

Fluid layouts solve this problem by using percentages to define each area of the layout. For example, instead of creating a content area of 960px, a web developer can create a layout that fills 80% of the screen and the three columns could take up 18%, 64%, and 18% respectively. By using percentages, the content can expand or shrink to fit the window of the user's computer. The CSS used to create a fixed layout vs a fluid layout is shown below.

Fixed LayoutFluid Layout
.content { width: 960px; }
.left, .right { width: 180px; }
.middle { width: 600px; }
.content { width: 80%; }
.left, .right { width: 18%; }
.middle { width: 64%; }

The CSS classes in the examples could each be assigned to a div within a page's HTML where the .left, .right, and .middle classes are enclosed within the .content class. The content class could also be a assigned to a table and the other classes could be assigned to table cells. The fixed width .content class does not require a defined width since it automatically spans the width of the enclosed divs or table cells.

Fluid Layout vs Responsive Design

The terms "fluid layout" and "responsive web design" are sometimes used interchangeably, but they are two different things. A page created using responsive web design includes CSS media queries, which load different styles depending on the width of the window or the type of device used to access the page. Responsive web design requires more CSS (and sometimes JavaScript) than a basic fluid layout, but it also provides more control over layout of the page.

Updated: May 5, 2015

Cite this definition:


TechTerms - The Tech Terms Computer Dictionary

This page contains a technical definition of Fluid Layout. It explains in computing terminology what Fluid Layout means and is one of many Internet terms in the TechTerms dictionary.

All definitions on the TechTerms website are written to be technically accurate but also easy to understand. If you find this Fluid Layout definition to be helpful, you can reference it using the citation links above. If you think a term should be updated or added to the TechTerms dictionary, please email TechTerms!