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
Post a Comment