Home » Forum » Web Design Forum » Web Page Design

Fluid designs

I read in one of your articles that you are using a fluid design, that adapts to different screen sizes.

How do you make this special kind of design?

Thanks in advance.

‹ Screen resolutions
Fluid designs
Submitted by admin on May 26, 2005 - 18:44.

In order to create fluid designs or liquid designs, is necessary to use relative units like:

  • em: the 'font-size' of the relevant font
  • ex: the 'x-height' of the relevant font
  • px: pixels, relative to the viewing device

And percentages.

In general 1em unit and 100% applied to the font text size, are equal to the default font text size of your browser, 16px for practical use. The em unit was originally derived from the width of the letter M.

The ex unit is a little tricky to work with. It represents the font's height of the lowercase x.

Because, Internet Explorer doesn't allow text resizing of text using px units, at this time, you are left to use em, ex units or percentages.

Finally, in order to create div containers capable to grow according to different screen resolutions, you need to define their size in em's, ex's or percentages. Personally, I find easier to set them in terms of percentages.

You can find examples of fluid designs on the free templates we offer for download, especially the ones from haran.