Before I wrote this article I checked Internet. I didn’t find any similar solution. I like fluid design because I want to use whole screen. But as anybody knows there are many problems at different resolutions or different crt sizes. That’s why I’ve preferred to use fixed size design.

But yesterday I remembered my an old study at 2007. I decided to developed it and today I finished. I think I’m going to use this layout afterwards.

Main thing in this design, all size -includes images- must be defined as em based . Somebody doesn’t like to use em but if you want to use fluid with every situation you must use em.

You can find a very very usefull document about em using at the incredible em and elastic layouts with css . It has also necessary links about em.

If you want to download the sample please click.

For demo click this.

While running demo, resize browser window or change screen resolution to see the result.

I didn’t use any css framework but I inspired from emastic. Also I didn’t use any javascript framework. I used bare DOM at javascript coding. I used 100% for default font-size. If you want to change default font-size, please set  myFontSize variable value as you desired before include layout.js.

For using; please include these codes into HEAD section of your HTML:

<link rel="stylesheet" href="your path/reset.css" type="text/css" media="screen, projection">

<script type="text/javascript" src="your path/layout.js"></script>

<script type="text/javascript">
  fluidLayoutinit(yourFontSize);   // yourFontSize in hundred percent value
</script>

I checked my work at IE6, IE8, Google Chrome 1.0.154.53, FF 3.0.8, Lunascape 5.0 Beta, Safari 3.1.2.