How to create fixed to screen layout

Question

I want to create layout like on image below:

IMAGE

I'm try to do this here: http://jsbin.com/EVEWOta/38 but I have problems with map and with other dimension... I cant put map on 100% x 100% and also sidebar is big problem

CSS:

<style type="text/css">
  #main {
    position:absolute;
    top:0px;
    left:0px;
    margin:auto;
    width:100%;
    height:100%;
    background:red;
    display:none;

  }
  #header {
    width:100%;
    height:50px;
    background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

    margin:auto;
}
  #middle {
    background:green;
    width:100%;
  }
  #side_bar {
    background:#ccc;
    width:350px;
    height:400px;
    float:left;

  }
  #map {
    background:yellow;
    width:999px;
    height:400px;
    display:block;
    float:left;

  }
  #bottom {
    position:fixed;
    bottom:0;
    background:yellowgreen;
    height:100px;
    width:100%;
  }

#firstPage {
    margin:auto;
    height:100%;
    width:100%;
    z-index:2;
}
#left {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    width:50%;
    height:100%;
    -webkit-transition: all 1s ease-in 1s;
    -moz-transition: all 1s ease-in 1s;
    -ms-transition: all 1s ease-in 1s;
    -o-transition: all 1s ease-in 1s;
    transition: all 1s ease-in 1s;
}
.right {

    background:url('http://31.media.tumblr.com/5828e52a075f36c07be52a9e2cf15583/tumblr_mo4w97RRfe1qelb6lo1_400.jpg') no-repeat;
}
.logo {
    font-size:32px;
    font-family:"Arial Black", Gadget, sans-serif;
    color:yellowgreen;
}
#firstPage table tr .logo p label {
    font-size: 12px;
}
</style>

So how I must change CSS code to get layout fixed to screen like on image I put above?

Answer 1

This should do it:

<header>Header</header>
<content>
    <side>Side</side>
    <div>Map</div>
</content>
<footer>Footer</footer>

<style>

html, body {
    margin:0px;
    padding:0px;
}

header {
    width:100%;
    height:100px;
    position:absolute;
    background:red;
}

content {
    top:100px;
    right:0px;
    left:0px;
    bottom:150px;
    position:absolute;
}

content > side {
    width:300px;
    height:100%;
    position:absolute;
    background:green;
}

content > div {
    top:0px;
    right:0px;
    left:300px;
    bottom:0px;
    position:absolute;
    background:blue;
}

footer {
    width:100%;
    height:150px;
    bottom:0px;
    position:absolute;
    background:red;
}

</style>

Good luck!