How to do modern CSS layout?

[toplisek]

I see that basic concept of layout is:
top
middle
footer

How to make CSS layout like google to have top part as 100% width with padding but middle part resize with sceen resolution.
Is this pure CSS skills or I have to use Javascript code to defined sceen resolution?

If you use 15'4 laptop is middle part different from 17'' as it seems it is moving larger and not fixed width.

[bluewalrus]

Which google page are you referring to Gmail, maps, searchs, docs, sites, videos, other? Post a link to the google page if it takes some interaction to get there.

I think your taking about margin auto for part and width 100% for another part but maybe not.

[toplisek]

When you are logged in you into google account you see many Report types. This list of reports resize with resolution but top part is all the time the same almost 100% width.

[gurmeet]

actually what u wana do? clear it 1st

do u wana make ur page larger with resolution or wana do it fix..?


its all done in CSS only
there are 3 type of layouts in CSS
1. Fixed
2. Liquid
3. Elastic

in FIxed the width will be fixed no matter what the size of resolution is....
.div1
{
width:200px;
}----------------------------
in Liquid the size is always effected with the size of the resolution ( as 14" monitor show small DIVs and 15" monitor show bigger..)
.div1
{
width:50%;
}-------------------------
elastic sizes increses when we increse the size of the ont and page view...
.div1
{
width:50em;
}


now u choose what kind of layout u wana make... n u can also mix it with each other

[maiden]

You can try finding inspiration in a CSS Gallery (http://www.thecssawards.com), actually the most important galleries are: CSS Mania and CSS Vault, but a lot more exist, you find a great list at meecss.com