html - Divs should not overlap -


i have small problem. webpage i'm working on has 3 areas:

  • on left navigation, should on left side
  • a content area in middle, should in middle of browser
  • the logo area on right side, should in top right corner

here's code have right now:

css

html, body     {         height: 100%;         min-height:100%;         padding: 0em;         margin: 0em;     }  body  {     font-family: segoe ui, arial;     font-size: 12px;     color: #616a71;     line-height: 15px;     letter-spacing: 0.5px;     overflow-y: scroll;     background-color: #ccc; }  div#navigation {     position: absolute;     float: left;     width: 220px;     left: 5px;     top: 70px;     z-index: 2;     padding-bottom: 50px;     background-color: red; }  div#content {     position: relative;     width: 1014px;     margin: 0 auto;     top: 70px;     padding: 10px;     background-color: #f6f6f3;     box-shadow: 0 0 5px rgba(0,0,0,0.2);     border-radius: 2px;     line-height: 20px; }  div#right {     position: absolute;     width: 258px;     right: 0;     top: 0;     background-color: green; } 

html

<!doctype html> <html lang="de"> <head>     <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=9" />     <title>header</title>     <link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" /> </head>  <body>     <div id="navigation">         nav     </div>     <div id="content">         content     </div>     <div id="right">         logo     </div> </body> </html> 

now, when resize browser, content area goes behind navigation are. want achieve, when there little space display navigation , content area side side horizontal scrollbar of browser should appear.

by using css media queries ones specifies below

@media (max-width: 600px) {  // code goes here } 

you can specify css used these widths. change width accordingly


Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

VBA function to include CDATA -