title: CSS issue when resizing browser
body: <p>I am facing a problem in poitioning the window:</p>
  
  <p>When I resize the window my CSS falied; I mean look of the page is changed:</p>
  
  <p>Here is the code:</p>
  
  <p>Webpage:</p>
  
  <pre><code>         &lt;!-- Begin Wrapper --&gt;
      &lt;div id="wrapper"&gt;
    &lt;!-- Begin Header --&gt;
    &lt;div id="header"&gt;
    &lt;h1&gt;
       Header
    &lt;/h1&gt;
    &lt;/div&gt;
    &lt;!-- End Header --&gt;
  
    &lt;!-- Begin Navigation --&gt;
    &lt;div id="navigation"&gt; 
    &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" &gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="current"&gt;One&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;asd&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;fdasdasd&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;asdasdasd&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;fsadfsd&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
            &lt;/li&gt;
              &lt;li&gt;&lt;a href="/faq.php"&gt;Two&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sdfsdfasdf&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sdfsdf&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sdfsdaf&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;werqwer&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="/faq.php"&gt;Three&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;safdfwe&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sdafdf&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/li&gt;
  
  
              &lt;li&gt;&lt;a href="/contact/contact.php"&gt;My Account&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;input type="text" style="width:200px;" id="search" /&gt;
                 &lt;asp:Button ID="btnSearch" runat="server" Text="Search" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;!-- End Navigation --&gt;
    &lt;!-- Begin Left Column --&gt;
    &lt;div id="leftcolumn"&gt;
  
  
     &lt;/div&gt;
    &lt;!-- End Left Column --&gt;
    &lt;!-- Begin Content Column --&gt;
  
    &lt;div id="content"&gt; 
  
     &lt;/div&gt;
    &lt;!-- End Content Column --&gt;
    &lt;!-- Begin Right Column --&gt;
    &lt;div id="rightcolumn"&gt; 
  
    &lt;/div&gt;
    &lt;!-- End Right Column --&gt;
    &lt;!-- Begin Footer --&gt;
    &lt;div id="footer"&gt; 
  
  
     &lt;/div&gt;
  
    &lt;!-- End Footer --&gt;
   &lt;/div&gt;
  &lt;!-- End Wrapper --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> menu{
      border:none;
      border:0px;
      margin:0px;
      padding:0px;
      font: 67.5% "Tahoma", "Verdana", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
      font-size:12px;
      font-weight:bold;
      }
  .menu ul{
      background:#333333;
      height:35px;
      list-style:none;
       display:block;
      margin:0;
      padding:0;
      }
      .menu li{
          float:left;
          padding:0px;
          }
      .menu li a{
          background:#333333 url("images/seperator.gif") bottom right no-repeat;
          color:#cccccc;
          display:block;
          font-weight:normal;
          line-height:35px;
          margin:0px;
          padding:0px 25px;
          text-align:center;
          text-decoration:none;
          }
          .menu li a:hover, .menu ul li:hover a{
              background: #2580a2 url("images/hover.gif") bottom center no-repeat;
              color:#FFFFFF;
              text-decoration:none;
              }
      .menu li ul{
          background:#333333;
          display:none;
          height:auto;
          padding:0px;
          margin:0px;
          border:0px;
          position:absolute;
          width:225px;
          z-index:200;
          /*top:1em;
          /*left:0;*/
          }
      .menu li:hover ul{
          display:block;
  
          }
      .menu li li {
          background:url('images/sub_sep.gif') bottom left no-repeat;
          display:block;
          float:none;
          margin:0px;
          padding:0px;
          width:225px;
          }
      .menu li:hover li a{
          background:none;
  
          }
      .menu li ul a{
          display:block;
          height:35px;
          font-size:12px;
          font-style:normal;
          margin:0px;
          padding:0px 10px 0px 15px;
          text-align:left;
          }
          .menu li ul a:hover, .menu li ul li:hover a{
              background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
              border:0px;
              color:#ffffff;
              text-decoration:none;
              }
      .menu p{
          clear:left;
          }   
  </code></pre>
  
  <p>Full screen mode:</p>
  
  <p><img src="https://i.stack.imgur.com/Us293U.jpg" alt="enter image description here"></p>
  
  <p>Resize browser:</p>
  
  <p><img src="https://i.stack.imgur.com/IsvWks.jpg" alt="enter image description here"></p>
  
  <p>Please help</p>