I'm currently working on the following website for a friend:

 

http://www.vibraphonics.com.au/

 

It looks great (in my humble opinion ) on my 24" iMac, however doesn't look so flash on anything smaller. Can anyone give me some hints as to how I can setup the site so that it resizes based on the users browser size?

At present your #page-wrapper has a fixed width: 700px; margin-right: 75px; float: right; which is causing the left side to slide away from the left side without a scrollbar in a small window width. You can improve this by editing like this:-

#page-wrapper {   
/*float: right;*/
height: 65%;
/*margin-right: 75px;*/ margin: auto;
width: 700px
}

 

This will center the content in any large resolution and create a horizontal scrollbar if the window is too small.

 

However, that isn't a fluid page which expands/contracts with any window resolution. That's more difficult and requires practice. A totally fluid page needs all widths, side margins, side padding and images coded with % widths, all totaling 100%. If you have side borders, these cannot be sized in % so leave them in px and make the total of other widths 97% or 98% to allow for the borders.

 

When you size an image in % width and don't state a height, the height will adjust in proportion, but this may create difficulties in a vertical direction.

 

Fluid pages work best where there isn't much on the page so that content can squeeze up or expand a lot without the page looking odd. You can use min-width and max-width instead of % width but IE6 doesn't process min or max width.

From one snowman fan to another, thanks heaps. This is a great start! I'm going to have a play tonight and see what I can come up with. Cheers!