проблема с HEIGHT 100%

[Reijii]

доброго дня,

вот есть следующая разметка, нужно чтобы content и sub-section были 100%:

HTML:

 <div id="header"><h1>header</h1></div>
 <div id="menu"><h1>menu</h1></div>
 <div id="content"><h1>content</h1></div>
 <div id="sub-section"><h1>sub-section</h1></div>
 <div id="footer"><h1>footer</h1></div>

CSS:

 #header,#menu,#content,#sub-section,#footer {
  overflow:hidden;
  display:inline-block
 }
 #footer {width:100%}
 #header,#menu,#sub-section {float:left}
 #content {float:right}
 #header {width:49%}
 #menu {width:50.9%}
 #content {width:80%}
 #sub-section {width:20%}
 #footer {clear:both}

смотрел и на webmascon и на xhtml.ru не совсем подходят решения.. грубо говоря совсем не подходят.. футер уезжает черт знает куда + высота sub-section не совпадает с content

[CAM]

html {
height:100%;
}

body {
padding:0;
width:700px; margin:0 auto;
min-height:100%;
position:relative;
}

* html body {
height:100%;
}

#content {
width:80%; padding-bottom:100px;
}

#footer {
clear:both;
position:absolute;
bottom:0;
height:100px;
width:100%;
}