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

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more