Browser resize messes up layout

Question

Я проектирую веб-сайт для школьного проекта. Результат идет хорошо, но я понял одну проблему. При масштабировании окон браузера макет становится все испорченным. Я googled на жидких макетах и ​​таких, но на самом деле не понимаю. У меня не так много опыта в кодировании, поэтому я надеялся, что кто-то более опытный даст мне некоторую помощь.

Формуляр CSS выглядит следующим образом

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    list-style: none; 
    text-decoration: none; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

*{ 
    padding: 0.0; 
    margin: 0; 
} 

body { 
    width: 100%; 
    height: 100%; 
    /*text-align: justify; 
    line-height: 16px;*/ 
    font-family: 'Century Gothic', 'Trebuchet MS', Verdana, Sans-Serif; 
    font-size: 12px; 
    background-color: #E8E8E8; 
} 

h1 { 
    font-size: 32px; 
    margin: 15px 0 10px 0; 
    color: #f99929; 
    font-weight: normal; 
} 

h2 {  
    font-size: 24px; 
    margin: 10px 0 5px 0; 
    color: #f99929; 
    font-weight: normal; 
} 

h3{ 
    font-size: 18px; 
    margin: 5px 0 2px 0; 
    color: #f99929; 
    font-weight: normal; 
} 

h4{ 
    font-size: 18px; 
    margin: 5px 0 2px 0; 
    color: #f99929; 
    font-weight: normal; 
} 

strong{ 
    font-weight: bold; 
} 
em{ 
    font-style:italic 
} 

a:link {color:#f7931e;} /* unvisited link */ 
a:visited {color:#f7931e;} /* visited link */ 
a:hover {color:#f7641e;} /* mouse over link */ 
a:active {color:#f7931e;} 

.clear { 
    clear: both; 
} 

/* Left and right menu */ 

.menuholder { 
    position: relative; 
    width: 160px; 
    height: 1px; 
    float: right; 
} 

.facebooklike { 
    position: fixed; 
    top: 400px; 
    margin-top: 20px; 


} 

.sidemenu { 
    position: fixed; 
    top: 166px; 
    background-color: #FFF; 
    box-shadow: 0px 3px 5px #888888; 
    -moz-box-shadow: 0px 3px 5px #888888; 
    -webkit-box-shadow: 0px 3px 5px #888888; 
    margin-top: 60px; 
} 

.sidemenu h1{ 
    font-size: 18px; 
    margin: 10px 0 10px 10px; 
} 

.sidemenu ul li a { 
    display:block; 
    color: #000; 
    width: 155px; 
    font-size: 15px; 
    padding: 3px 0 10px 5px; 

    text-align: left; 
} 

.sidemenu ul li a:hover{ 
    background-image: url('../images/menubutton.png'); 
    box-shadow: 0px 3px 5px #888888; 
    -moz-box-shadow: 0px 3px 5px #888888; 
    -webkit-box-shadow: 0px 3px 5px #888888; 
} 

.sidemenu ul li ul { 
    display:block; 
} 

.sidemenu ul li ul li a{ 
    font-size: 14px; 
    padding-left: 10px; 
    width: 130px; 
    border: none; 
} 

.sidemenu ul li ul li a:hover{ 
    padding-left: 10px; 
    background-color: #f99929; 
} 
.sidemenu ul li ul li a:active{ 
    padding-left: 15px; 
    width: 145px; 
    background-color: #f99929; 
} 

/* Main div */ 
#Main { 
    position: relative; 
    width: 960px; 
    height: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 240px; 
} 

#ContentContainer { 
    line-height: 150%; 
    /*float:left; */ 
    padding: 30px 40px 20px 40px; 
    margin: 20px auto 0px auto; 
    width: 525px; 
    min-height: 480px; 
    background-color: #FFF; 
    box-shadow: 0 0 30px #B8B8B8; 
    -moz-box-shadow: 0 0 30px #B8B8B8; 
    -webkit-box-shadow: 0 0 30px #B8B8B8; 
} 

#ContentContainer p { 
    padding-bottom: 12px; 
} 

/* Footer */ 
#Footer { 
    margin: 0 auto; 
    border-top: solid #B8B8B8 1px; 
    width: 400px; 
    height: 40px; 
    background-color: #FFF; 
    padding-left: 20px; 
} 

/* Header */ 
#Header { 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 220px; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
} 

.logotype { 
    float: left; 
    position: relative; 
    left:0px; 
    z-index: 2; 
    height: 150px; 
    width: 200px; 
    margin: 10px 10px 10px 10px; 
    background-image: url('../images/loggan.png'); 
    background-repeat: no-repeat; 

} 
/* Top menu */ 
#navigation { 
    font-family: 'Century Gothic', 'Trebuchet MS', Verdana, Sans-Serif; 
    width: 100%; 
    height: 20px; 
    margin: 0px 0 0 65px; 
    /*background-color: rgba(3,3,3,0.5);*/ 
} 

#navigation ul { 
    margin: 0 auto; 
    width: 800px; 
} 

#navigation ul li { 
    float: left; 
    margin: -0px 0px -0px 0px; 
    box-shadow: 0px 2px 2px #888888; 
    -moz-box-shadow: 0px 2px 2px #888888; 
    -webkit-box-shadow: 0px 2px 2px #888888; 
    background-image: url('../images/aktivbutton.png'); 
    /* border: 0px solid #000; border-radius: 5px; */ 
} 

#navigation ul li a { 
    display: block; 
    width: 120px; 
    padding: 3px 0px; 
    font-size: 21px; 
    text-align: center; 
    color: #000; 
    /*border: solid 1px #fbad18;*/ 
} 

#navigation ul li a:hover { 
    background-image: url('../images/topbutton2.png'); 
    /* border: 0px solid #000; border-radius: 5px; */ 
    background-repeat: repeat-x; 
    background-position: left; 
    background-color: rgba(249,153,41,0.9); 
    color: #000; 
} 

#navigation ul li a:active { 
    color: #000; 
} 

#navigation ul li:hover ul { 
    display: block; 
} 

#navigation ul li ul { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    display: none; 
    float: left; 
    width: 120px; 
} 

#navigation ul li ul li { 
    margin: 0px; 
} 
#navigation ul li ul li a{ 
    padding:5px 0px 10px 0px; 
    font-size: 16px; 
} 

HTML-файл для верстки.

<!doctype html> 
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#"> 
    <head> 
     <link rel="shortcut icon" href="favicon.gif" type="image/x-icon"> 
     <% base_tag %> 
     <meta charset="utf-8"> 
     <meta property="og:title" content="Trappan"/> 
     <meta property="og:site_name" content="Trappan"/> 
     <title>Trappan - $Title</title> 
     <% require javascript(themes/anka/javascript/jquery-1.9.1.js) %> 
     <% require javascript(themes/anka/javascript/easing.1.3.js) %> 
     <% require javascript(themes/anka/javascript/effects.js) %> 
     <% require javascript(themes/anka/javascript/jquery.cycle.all.min.js) %> 
     <% require javascript(themes/anka/javascript/jquery-ui.js) %> 
     <% require themedCSS(layout) %> 
     <% require themedCSS(news) %> 
     <% require themedCSS(lunch) %> 
     <% require themedCSS(screen) %> 
     <% require themedCSS(accordion) %> 

    </head> 



    <body> 
     <div id="fb-root"></div> 
      <script>(function(d, s, id) { 
       var js, fjs = d.getElementsByTagName(s)[0]; 
       if (d.getElementById(id)) return; 
       js = d.createElement(s); js.id = id; 
       js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1&appId=371408952950291"; 
       fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk'));</script> 

<style> 
     label { 
       display: inline-block; 
       width: 5em; 
          } 
</style> 
    <script> 
      $(function() { 
      $(document).tooltip({ 
      track: true 
     }); 
    }); 
        </script> 

       <script> 
         $(function() { 
         $("#accordion").accordion({ heightStyle: "content" }); 
         }); 
       </script> 

       <script> 
         $(function() { 
         $("#accordion").accordion({ 
          collapsible: true 
         }); 
         }); 
        </script> 

     <div id="Main"> 
      <div id="ContentContainer"> 
       $Content 
       $Layout 
       $Form 
      </div> 
      <% include rightmenu %> 
     </div> 


     <% include headermenu %>  
    </body> 

</html> 

Надеюсь, вы можете мне помочь. Потому что я потерян.

Answer 1

Если я правильно прочитал вашу проблему, я считаю, что Stop the browser from pushing everything around when I resize может решить вашу проблему. У меня была эта проблема некоторое время назад, и я, возможно, использовал это или я использовал

Position: Fixed; 

Но опять-таки это было некоторое время назад, так что я не уверен.