A fluid website layout, also referred to as a liquid layout or a responsive layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.
Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.
Even though fluid layouts can present a few problems, some of those problems can be overcome with a few tricks. The less a fluid Web design depends on graphics and difficult techniques, the easier it will be to create and maintain. It will also be more compatible with alternate screen resolutions. With cleaner code and design, compatibility problems are more easily prevented, found and dealt with. For example, uses a fluid Web page layout, and to make it simple only the top black-and-orange navigation bar expands, depending on the user’s situation. Otherwise, the content area expands and contracts as needed, and smart use of CSS covers situations in which the sidebar and internal content could clash.
Two CSS properties, min-width and max-width, can be used to create a fixed width if the user’s screen is too small or too big for the layout to be usable.
In this case, the layout gets a scroll bar and functions essentially as a fixed-width layout. Look over W3Schools’ pages on the min-width and max-width CSS properties for more details.