Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

What is: Fluid layout

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

In WordPress theme development terminology a fluid layout is a layout that uses proportional values as a measuring unit for blocks of content, images, or any other item that is a part of the WordPress theme. This allows the web page to stretch and contract relative to the user’s screen size. This is different from fixed layouts where every aspect of the theme has a fixed width in pixels.

Whilst creating a website or WordPress theme, designers and developers have to decide whether they want to create a fixed or fluid width design. Although fixed width designs are typically seen as easier to create, they have several flaws that are fixed by using a fluid layout. Because many users today have screen resolutions higher than 1024×768 there may be lots of white space on either side of the theme’s content if it uses a fixed layout. For users with smaller screens or those that access your site on mobile they may end up seeing a horizontal scroll bar as well.

Although fluid design is typically seen as solving many problems related to multiple screen sizes it creates some problems of its own. The designer has less control over what the user sees and content such as images may require multiple widths to be displayed on different resolutions. It the user’s screen is extremely large then a lack of content may cause the fluid design to lose some of its appeal again.

With the increase in smartphone and tablet use around the world, the term Responsive Development has grown in popularity. This is not dissimilar to fluid layouts, and it is the process of creating a website or theme with all devices and screen sizes in mind. The techniques of fluid design, along with CSS media queries, will often be used to create a website or theme that is ‘responsive’.

Additional Reading

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.