HTML / CSS: Experiencing Issues Regarding Site Width / Height -

i in process of setting website advertising region people visit task myself.

i have spent time attempting place have done far on 1 page. wish there no scrollbars, not want make scrollbars invisible or forth, mean have web page fit on 1 page of browser without user having need scroll aesthetic purposes.

i have played around width , height of divs along number of other things in attempt achieve desired result no success unfortunately. required change regarding code in order achieve this?

body,  td,  th {    font-family: consolas, "andale mono", "lucida console", "lucida sans typewriter", monaco, "courier new", monospace;  }  body {    margin: 0px;  }  #navigation {    color: white;    background-color: #292526;    width: 100%;    padding: 0.5% 0.5%;  }  #navigationleft {    width: 24.5%;    display: inline-block;    vertical-align: middle;    font-size: 180%;  }  #navigationright {    width: 74.5%;    display: inline-block;    vertical-align: middle;  }  #navigation ul {    float: right;  }  #navigation ul li {    display: inline;  }  #navigation {    font-size: 120%;    color: white;    text-decoration: none;  }  #banner {    line-height: 0;  }  #footer {    color: white;    background-color: #292526;    width: 100%;    padding: 0.5% 0.5%;    text-align: center;  }

<div id="container">    <div id="navigation">      <div id="navigationleft">        <a href="#">visit clare ireland</a>      </div>      <div id="navigationright">        <ul>          <li><a href="#">home |</a>          </li>          <li><a href="#">maps |</a>          </li>          <li><a href="#">hotels |</a>          </li>          <li><a href="#">appartments |</a>          </li>          <li><a href="#">attractions |</a>          </li>          <li><a href="#">essentials |</a>          </li>          <li><a href="#">bars & clubs |</a>          </li>          <li><a href="#">transport</a>          </li>        </ul>      </div>    </div>    <div id="banner">      <img src="http://i.imgur.com/vsirznz.jpg" alt="the cliffs of moher" />    </div>    <div id="footer">      <p>placeholder text</p>    </div>  </div>

something similar following:

example here

its not gives idea, depend on screen content , how want on there, cause issue, minimalistic fine kitchen sink ouch!

      <div class="container">       <header>         <div class="logo">           <a href="#">visit clare ireland</a>         </div>         <nav>           <ul>             <li><a href="#">home |</a>               </li>               <li><a href="#">maps |</a>               </li>               <li><a href="#">hotels |</a>               </li>               <li><a href="#">appartments |</a>               </li>               <li><a href="#">attractions |</a>               </li>               <li><a href="#">essentials |</a>               </li>               <li><a href="#">bars & clubs |</a>               </li>               <li><a href="#">transport</a>               </li>           </ul>         </nav>       </header>       <main>         <section>             lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis quis laborum, ea repellat! eius sint, minima nulla asperiores excepturi. fuga libero exercitationem soluta nam perspiciatis, sit iusto enim asperiores quibusdam.          </section>        </main>       <footer>         <p>footer content</p>         </footer>       </div> 

css

      html,       body {         margin: 0;         padding:0;         box-sizing: border-box;         font-family: consolas, "andale mono", "lucida console", "lucida sans typewriter", monaco, "courier new", monospace;         font-size: 16px;       }         header {         margin: 0 auto;         padding: 0;         position: fixed;         top: 0;         left: 0;         right: 0;         height: 80px;         background: #292526;         color: white;         overflow: hidden;         box-sizing: inherit;       }        header:before,       header:after {content: " ";display: table;}       header:after {clear: both;}        header .logo {         margin-top: 20px;         position: relative;         float: left;         width: 40%;       }        header nav {         position: relative;         float: left;         width: 60%;         text-align: left;       }        header a:link,       header a:visited,       header a:active {         margin: 0 auto;         padding: 0;         padding-left: 20px;         font-size: 26px;         text-decoration: none;         color: white;         text-align: center;       }        nav ul {         list-style: none;       }        nav ul li {         display: inline-block;       }        nav ul li a:link,       nav ul li a:visited,       nav ul li a:active {         margin: 0;         padding: 0;         font-size: 12px;         text-decoration: none;         color: white;       }        main {         margin: 0;         padding: 0;         position: fixed;         top:80px;         bottom: 50px;         left: 0;         right:0;         width: 100%;         height: 100%;         background: white url('http://i.imgur.com/vsirznz.jpg') no-repeat center center;         background-size: cover;       }        main section {         margin: 0;         padding: 20px;         position: relative;         top: 20px;         bottom: 20px;         left: 20px;         right: 20px;         width: 93%;         background: rgba(255,255,255,.4);       }        footer {         margin: 0 auto;         padding: 0;         position: fixed;         bottom: 0;         left: 0;         right: 0;         height: 40px;         background: #292526;         color: white;       }       footer p {         margin: 0;         padding: 0;         padding-top: 10px;         text-align: center;         font-size: 12px;         text-transform: uppercase;       }