I'm trying to teach myself CSS. The only thing I've used it for before was for text formatting but now I'm trying my hand at positioning the elements through CSS.

The issue I've run into is that I have an element that is offset by so many pixels to the left, but I want it to stretch to the full browser window's width. Unfortunately having and offset AND height="100%" sets the 100% width off but that many pixels so you have to scroll to the side to see all of the element. The same this is happening with a vertical element.

I need the design to adapt to different resolutions/window sizes without unnecessary scrolling.

The test site (the design elements are also rough, as you can tell by looking at the images) can be found at http://freeplayenergy.com/NewSiteTest/test.html

Thanks

There are several causes to this problem

Mozilla browsers consider any margins, borders, and padding to be OUTSIDE the declared dimensions and positions of a box object. This includes floats.

IE consider any margins, borders, and padding to be INSIDE the declared dimensions and positions of a box object. This includes floats.

So you have to design your page in such a way that this discrepancy doesn't matter. The trick is to nest some stuff.

First the body tag has different defaults in different browsers. If the box object surroundings are getting in your way, apply a style such as:



Apply it to the body, and to the image itself if necessary.

You can't simultaneously stretch an image to both the browser window width and height without changing the aspect-ratio on sime computers. This has the fun-house mirror effect on the image.

I prefer to center an image horizontally instead.

There is no value which sets the object to the height of the browser window. The window is considered to be infinitely high. Height: 100%; always takes the height of its container.