HTML positioning

Question

I thought that elements aren't fixed by default in HTML? But everything I put on my page (except my header) won't move when I resize the browser window... How come?

I want it to be the other way round! (The header should stay fixed, and the rest of the elements should be able to move).

I didn't use any position commands in my css style sheet.

I only used this for example :

.container2 {
    width: 1200px;
    height: 480px;
    margin-top: 60px;
    margin-left: 100px;
    margin-bottom: 0;
}

My jsfiddle: http://jsfiddle.net/richirich/68Cnd/

(Yes, I'm new to html, so pardon my dirty code).

Answer 1

If you have multible little div's and you want that the div's use the whole place (horizontal) you can use:

float: left

If you have one big div and you want that the div resize himself by resize the browser you have to use for example:

width: 80%

Answer 2

Just add position:fixed; to #header

Answer 3

You can start from here: http://jsfiddle.net/68Cnd/1/ . Removed the body fixed width, and replaced containers width with max-width