html - fixed position <div> with width 100% leaves some space on left -


i writing simple website myself. i'm in process of creating fixed navigation bar @ bottom of page navigation (duh) , social media links. have created div right width set 100% there space left on left side. html:

<html> <head>     <!-- stuff browser , search engine -->     <title>page</title>     <!-- links follow -->     <link href='http://fonts.googleapis.com/css?family=pt+sans:400,700,400italic' rel='stylesheet' type='text/css'>     <link rel="stylesheet" type="text/css" href="myblogstyle.css">     <!-- css styling -->     <style>     </style> </head> <body> <div id = 'maindiv' class = 'centered'>     <span id = 'maintitle'>page</span><br/>     <hr/><br/>      <div id="posts">         <!-- format:                 <span class = 'post_title'>[title]</span>                 <p class = 'post_text'>[body]</p>                 <hr/>         -->     </div>      <p id="footer">             <a>previous</a> |             <a>next</a><br/>             <a>archive</a>     </p> </div> <div id = 'anchor'>  </div> </body> </html>

css:

#maindiv, #anchor{     text-align: center;     font-family: 'pt sans';     font-size: 1em;     padding: 0;     width: 100%;     margin: 0;     padding: 0px;     border:0; } #anchor{     height: 4%;     background-color: black;     position: fixed;     bottom: 0;     right: auto;     left: auto; } #maintitle{     font-size: 3em;     margin-top: 3%;     margin-bottom: 5%;     margin-left: 0.5%;     margin-right: 0.5% } .centered{     margin-left: auto;     margin-right: auto; } a{     color:black;     text-decoration: none;     font-weight: bold; } hr{     background-color: black;     width: 30%;     height: 0.05%;     margin-top: 1%;     margin-bottom: 1%; } a:hover{     color: #333333; }

i tried many of suggestions on stack overflow none of them seem work. if find answer, please explain why works , doing wrong. thanks.

here illustrative demonstration of fixed element.

if use position: fixed, , set offsets auto, left: auto , right: auto, css engine position element appear if normal static positioned element. result, left offset the left edge of body element, taking account initial 10px padding (browser default value). finally, width of element shrink-to-fit width (see ex 1).

now, if set left: 0 , right: auto (see ex 2), element's left edge pinned left edge of viewport (not body), , before, element has shrink-to-fit width , right offset computes value corresponding position of right edge of element.

if set left: 0 , right: 0, left , right edges of element pinned left , right of view port, , width computes 100% (see ex 3).

finally, if in addition specify display: table, shrink-to-fit width, , if add margin: 0 auto, horizontal centering (see ex 4).

to appreciate behavior, need read css specification concerning absolute positioning:

http://www.w3.org/tr/css21/visudet.html#abs-non-replaced-width

and pay attention concept of static-position containing block.

if understand part of css specification, grasp flexibility , power of positioning , able take advantage of in designs.

html, body {    height: 100%;  }  #anchor {    height: 20px;    background-color: black;    color: white;    position: fixed;    bottom: 0;  }  #anchor-mid {    height: 20px;    background-color: black;    color: white;    position: fixed;    bottom: 150px;    right: 0;    left: 0;    margin: 0 auto;    display: table;  }  #anchor.ex1 {    bottom: 0px;  }  #anchor.ex2 {    bottom: 50px;    left: 0;  }  #anchor.ex3 {    bottom: 100px;    right: 0;    left: 0;    margin: 0 auto;  }
<div id="anchor-mid">anchor div - ex 4:  display: table, left: 0, right: 0, margin: 0 auto</div>  <div id="anchor" class="ex1">anchor div - ex 1: left: auto, right: auto</div>  <div id="anchor" class="ex2">anchor div - ex 2: left: 0, right: auto</div>  <div id="anchor" class="ex3">anchor div - ex 3: left: 0, right: 0</div>


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more