[HTML-CSS] div float 100%, footer pied de page.

Bonjour, je suis un petit newbie quand on parle de HTML-CSS.
Alors je pense avoir 2 questions a vous faires.

Voici mon code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Unamed</title>
    <link rel="stylesheet" type="text/css" href="site.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="page">
 
    <div id="banner">
        <div id="logo">
            <center>Unamed</center>
        </div><!-- end logo -->
        <div id="slogan">
            <center>Slogan</center>
        </div><!-- end slogan -->
    </div><!-- end banner -->
 
    <div id="bar">
    </div><!-- end bar -->
    <div id="filter">
        <font size="2" color="white">Filtre</font>
    </div><!-- end filter -->
 
    <div id="main">
        <div id="menu1">
            <center>
            <div id="navigation">
                <!-- navigation button -->
            </div><!-- end navigation -->
            <div id="stats">
                Guest:10000
            </div><!-- end stats -->
            </center>
        </div><!-- end menu1 -->
 
        <div id="content">
           Content Website
        </div><!-- end content -->
 
        <div id="menu2">
            <div id="separator">   
            </div><!-- end seperator -->
            <div id="pub">
                <center>Pub.  &  Partners</center>
            </div><!-- end pub -->
        </div><!-- end menu2 -->
    </div><!-- end main -->
 
    <div id="footer">
        <div id="copyright" >
      </div><!-- end copyright -->
    </div><!-- end footer -->
 
</div><!-- end page -->
</body>
</html>

Voici mon code CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
 
body
{  
    width:100%;
    height:100%;
    margin:inherit;
    padding:inherit;
    background-image: url('Image/texture/bg_steam.jpg');
	background-repeat: repeat;
}
 
#page
{ 
    height:100%;
}
 
#banner
{
	width:1024px;
	height:100px;
	margin-left:auto; 
  	margin-right:auto;
  	/* margin-top:auto; 
  	margin-bottom:auto; */ 
	background-color:#980000;
}
 
#logo
{
    float:left;
    width:300px;
    height:100px;
}
 
#slogan
{
    float:right;
    width:724px;
    height:100px;
}
 
#bar
{
    width:100%;
	height:5px;
	background-color:#e11212; 
}
 
#filter
{
    width:1024px;
    margin-left:auto; 
  	margin-right:auto;
    background-color:#e11212;  
}
 
#main
{
    width:1024px; 
    height:100%; 
    min-height:300px;
    margin-left:auto; 
  	margin-right:auto; 
    /* margin-top:auto; 
  	margin-bottom:auto; */
 
  	background-color:white; 
}
 
#menu1
{
    float:left;
    width:200px;
	height:100%;
 
	background-color:silver; 
}
 
#navigation
{
}
 
#stats
{
}
 
#content 
{
    float:left;
    width:674px;
	height:100%;
 
	background-color:lime; 
}
 
#menu2
{
	float:right;
	width:150px;
	height:100%;
 
	background-color:yellow; 
}
 
#separator
{
    float:left;
    height:100%;
    width:2%;
    margin-top:10%;
    margin-bottom:10%;
}
 
#pub
{
    float:right;
    height:100%;
    width:98%;
 
    background-color:aqua; 
}
 
#footer
{
	width:100%;
	height:13px;
	clear:both;
	background-color:#e11212; 
}
 
#copyright
{
    width:1024px;
    margin-left:auto; 
  	margin-right:auto;  
 
  	color:white; 
}

Mes Questions :

1. Je voudrais que toutes les div a l'interieur de la div main est un height de 100%, occupant toute la hauteur que main presente, si une div a un height plus grand que celui du main, que celui grandisse.
2. Que footer sois tourjours en bas, meme quand le site n'occupe pas toutes la hauteurs, que le footer se trouve le plus en bas possible.

Avez vous des idées ?
Car jusqu'a maintenant aucune reussite de mon cote.
Merci de votre aide.