html - Html5 with CSS elements move when zooming -


hi guys might easy question i'm struggling bit 1 problem in html , css page.

problem: when zoom int "section" part moves under nav , when zoom out footer moves next section part.....

here sample of html page:

<!doctype html>  <html>  <head>     <meta charset="utf-8">     <title>mywebsite</title>     <link rel="stylesheet" type="text/css" href="css/style.css">  </head>  <header>    header   </header>   <body>      <nav>       <ul>           <li>              tab1            </li>           <li>             tab2            </li>           <li>              tab3            </li>           <li>              tab4            </li>           <li>              tab5           </li>         </ul>   </nav>      <section id="">  section   </section>    <footer>   footer   </footer>    </body>   </html>` 

here css page:

header {     width: 1325px;     height: 150px;     background-color: green;     position: relative; }  nav {     position: relative;     width: 400px;     height:  500px;     background-color: teal;     float: left;     overflow: hidden; }  section {     position: relative;     float: left;     width: 925px;     height: 500px;     background-color: blue; }  footer {       float: left;     width: 1325px;     height: 50px;     background-color: lime;     position: relative;     overflow: hidden;     } 

thanks , time in advance

your body tag needs before header. add wrapper width html/css.

here fiddle: http://jsfiddle.net/msjlw/

<div id="wrap"> <header>    header   </header>   <nav>       <ul>           <li>              tab1            </li>           <li>             tab2            </li>           <li>              tab3            </li>           <li>              tab4            </li>           <li>              tab5           </li>       </ul>   </nav>   <section id="">  section   </section>    <footer>   footer   </footer>  </div>  #wrap{     width:1325px; } header {     width: 1325px;     height: 150px;     background-color: green;  }  nav {     width: 400px;     height:  500px;     background-color: teal;     float: left;     overflow: hidden; }  section {     float: left;     width: 925px;     height: 500px;     background-color: blue; }  footer {       float: left;     width: 1325px;     height: 50px;     background-color: lime;     overflow: hidden;     } 

Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -