Question

What I want is to have mutliple divs after one another, that each is the full width and height of the browser/viewport. When the browser is rezized, the divs should rezise accordingly.

I have succesfully managed to do this in FF and IE (just width: auto and 100% height on each div), but Safari & Chrome still doesn’t get it. The weird thing is, i don’t get what happening in those browsers. While the first div behaves as the way i want, the height gets bigger and bigger for each div, and absolut positioned elements whithin each div ends upp somewhere on the bottom of the page; it’s a mess.

an example of what i am trying to do can be found here: http://konstfuck.se/test/

Answer 1

1) You don’t have a valid Doctype, so your page will be rendered in Quirks mode and, as Henri Sivonen wrote,

[i]n the Quirks mode the browsers
violate contemporary Web format
specifications in order to avoid
“breaking” pages authored according to
practices that were prevalent in the
late 1990s. Different browsers
implement different quirks. In
Internet Explorer 6, 7 and 8, the
Quirks mode is effectively frozen IE
5.5. In other browsers, the Quirks mode is a handful of deviations from
the Almost Standards mode.

2) Add height: 100% to html and body. As the spec says:

The percentage is calculated with
respect to the height of the generated
box’s containing block. If the height
of the containing block is not
specified explicitly (i.e., it depends
on content height), and this element
is not absolutely positioned, the
value computes to ‘auto’.

So, if you don’t specify the height of the containing block, as is the case in your example, the height is set to auto.