Fluid or Liquid Layout
In Fluid layouts the width of the blocks or columns is specified in percentages %, as shown in the figure below.
A full screen's width is taken as 100%. Remember that this screen is always the browser's screen window not your complete desktop.
Features
In CSS, the divisions or blocks that are inside a parent divison take their parent divison's size as a reference.
Lets say you assign a division(A) 50% width, which takes half the space in viewing window. Now, if this division has a division(B) inside it and you assign its width to be 50%, then B's width would be half of A's width i.e 25% of the viewing window.
Pros
- Fuild layouts are independent of display resolutions used.
- Fuild layouts adapt completely to the users display setup.
- No white spcaes are left on sides, if the width is specified to take full screen area.
- Resizing browser's window, resizes inside columns too, which prevents sroll bars to appear (can be a con sometimes).
- Application is easy, since no exact measurement is necessary (like pixels in fixed design). Just specify the percentages.
Cons
- Fuild layout depends more on user's setup and less on deisgner's vision i.e deisgner has less control on what user may see.
- Resizing browser's window can resize inside columns to such as extent that it may begin to distort the design.
- Design can vary significantly from small to large screens. Smaller screens make the design look conjusted and larger screens may expand it too much.
- Fixed width object like images, donot have a fixed proportion to other columns. This can make the image look small on some screen and big on some screens.
Next :
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,