[jack100]

I have started to use CSS more recently but need to know how to implement 'Liquid Design' So people with different browsers, screen resolutions would view the CSS the same way. The easiest way to describe the problem is when you minimise the page none of the elements move. This is the css i have used:
#header {position:absolute; background-image:url(headerbg.png); width:800px; height:150px; margin-left:200px;}

can anyone point out how to make this more liquid?

[jack100]

Ok, that didn't work, i dont know how to disable HTML in these forums.

[Cew27]

i dont really know what i am talking about but i know that div tags are best for different res and browsers as they move with it unlike app divs

[cheesepuff]

div stands for division and that doesn't really have much to do with that code. XHTML was made years back to make it so that all browsers see that same thing. some websites just don't use it, but almost all use XHTML. the CSS doesn't have much to do with it. there is already a universal language for this and it has already been solved and in use. i learned all this in my 1 semester of computer programing :D as for the screen resolutions, try "Ctrl" and "+" /"-"

[Carbon]

I think what he's trying to do is make the website scale across different res. To do this you will need to specify relative sizes in your tables like percent and em rather than pt and px.

[dr john]

Don't use tables for layout. Tables are for tables of data.

Set up a wrapper div. give it a size using percentages - say 80%, and preferable set a min-width and max width. But IE6 doesn't understand min-width and max-width, so you then have to add a conditional statement to the head to set the same min and max for IE6.
Min width is typically set at about 770 - 750pixels, max width at about 1000 - 950 pixels. This works nicely for the vast, vast majority of users.

You might want to center the wrapper div, so normally you add margin:auto to the css for that div.
But IE6 and below don't understand margin:auto. So you then also set text-align:center for the body, then text-align: left for the wrapper div. And that then works perfectly for ALL browsers.


Then inside the wrapper div, set the rest of your layout divs, again with their widths set in percentages (or one at a fixed width and one at a percentage).

The wrapper div then expands and contracts within sensible limits, and the divs inside it are forced to adjust to suit the width of the wrapper.

[jack100]

Thanks all of this has stopped it from messing up in different reses and browsers, but everyting still overlaps when the browser isnt maximised fully.