How to set height of my web page in html5 - css

Question

I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.

Answer 1

I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve