I have a question, probably in the wrong area. I do not know the answer to this it is regarding css and styling templates. At the moment, I have a template that is to large for a small resolution. The problem is that we have wings on the side of the template and we know the wings can be cut but we want them to show as you increase the size of the resolution. I remember someone talking about this before but can't remember who. So pretty much we want it so the template will fit on a small resolution by cutting of it's sides but as your resolution increases the sides start showing up. This is so there is no bars on the bottom. And sorry can't show the template. Thanks, W3 Theory
For this scenario lets assume that you are designing for a 1024x768 resolution. In this case you would go with a container of 960-980px. All your website content and elements will go within this length. However, you can add a background image (and center it) so that it shows up on either side of your main container. This way you can show extra content, but for those who have a small resolution, they will only see what is important, and for everyone else with higher resolutions, they will see the additional parts in your background. Let me know if you need clarification.
See the attached file below: Basically you will need to make some tweaks to the design; the green lines I added are basically what a typical user with a 1024x768 resolution will see. So obviously some of it will get cut off. My recommendation is to reduce the size by 50-60 pixels so you have some leg room on each side. So your width of the content area should only be around 960-980px in total. For everything outside of the green lines, you should just make that part of the actual background ( body { background:url(bg.jpg);} ). Everything within the green lines can be made into separate div's for each element, each with its own background image applied. Let me know if this makes sense.