html - Why does this HR element stop part way across the page? -


this hard 1 explain. fiddle should show what's going on:

https://jsfiddle.net/m6zfvgp1/1/

what i've done divide page header , content divs. @ bottom of header i've got hr element , i've re-positioned "buttons" - heavily styled links - sit atop middle of hr between header , content div.

here's code:

html,body{   height: 100%;   width:100%;   margin: 0; }  #header {     position: fixed;     top: 0;     left: 0;     right: 0;     height: 100px;     z-index: 5; }  #content {     position: fixed;     top: 100px;     bottom: 100px;     left: 0;     right: 0;     background-color: white;     overflow: auto;     z-index: 4; }  .hr {     border-bottom: 2px solid red;     clear: both;     width: 100%; }  #buttons .hr {     margin-top: -16px;     color: #ddd; }  #buttons {     border: 1px solid #32b8eb;     background-color: white;     padding: 4px 24px;     margin-left: 30px;     height: 32px;     line-height: 32px; }  <body class="page">     <div id="header">          <div id="buttons" style="position: absolute; top: 83px;">             <a class="" href="/home/newjob">new job</a>             <a class="active" href="/">job list</a>             <div class="hr"></div>         </div>      </div>     <div id="content">     </div>  </body>

however, you'll see in fiddle, there's problem: hr stops displaying after rightmost button though width set 100%. why?

it because div#buttons absolutely positioned , takes width of contents. can make full width either by:

  • width: 100%
  • left: 0; right: 0;

alternatively, can use border-bottom on full width parent element.

#header {   border-bottom: 2px solid #000; } 

html,  body {    height: 100%;    width: 100%;    margin: 0;  }    #header {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 100px;    z-index: 5;  }    #content {    position: fixed;    top: 100px;    bottom: 100px;    left: 0;    right: 0;    background-color: white;    overflow: auto;    z-index: 4;  }    .hr {    border-bottom: 2px solid red;    clear: both;    width: 100%;  }    #buttons .hr {    margin-top: -16px;    color: #ddd;  }    #buttons {    border: 1px solid #32b8eb;    background-color: white;    padding: 4px 24px;    margin-left: 30px;    font-weight: normal;    height: 32px;    font-size: 18px;    text-transform: uppercase;    line-height: 32px;    font-family: calibri;    color: black;    text-decoration: none;    cursor: pointer;  }    #header {    border-bottom: 2px solid #000;  }
<body class="page">    <div id="header">        <div id="buttons" style="position: absolute; top: 83px;">        <a class="" href="/home/newjob">new job</a>        <a class="active" href="/">job list</a>        <a class="" href="/home/pricing">pricing</a>        <div class="hr"></div>      </div>      </div>    <div id="content">      </div>  </body>

check both:

width: 100% technique:

html,  body {    height: 100%;    width: 100%;    margin: 0;  }    #header {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 100px;    z-index: 5;  }    #content {    position: fixed;    top: 100px;    bottom: 100px;    left: 0;    right: 0;    background-color: white;    overflow: auto;    z-index: 4;  }    .hr {    border-bottom: 2px solid red;    clear: both;    width: 100%;  }    #buttons .hr {    margin-top: -16px;    color: #ddd;  }    #buttons {    border: 1px solid #32b8eb;    background-color: white;    padding: 4px 24px;    margin-left: 30px;    font-weight: normal;    height: 32px;    font-size: 18px;    text-transform: uppercase;    line-height: 32px;    font-family: calibri;    color: black;    text-decoration: none;    cursor: pointer;  }    #buttons {    width: 100%;  }
<body class="page">    <div id="header">        <div id="buttons" style="position: absolute; top: 83px;">        <a class="" href="/home/newjob">new job</a>        <a class="active" href="/">job list</a>        <a class="" href="/home/pricing">pricing</a>        <div class="hr"></div>      </div>      </div>    <div id="content">      </div>  </body>

left: 0; right: 0; technique:

html,  body {    height: 100%;    width: 100%;    margin: 0;  }    #header {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 100px;    z-index: 5;  }    #content {    position: fixed;    top: 100px;    bottom: 100px;    left: 0;    right: 0;    background-color: white;    overflow: auto;    z-index: 4;  }    .hr {    border-bottom: 2px solid red;    clear: both;    width: 100%;  }    #buttons .hr {    margin-top: -16px;    color: #ddd;  }    #buttons {    border: 1px solid #32b8eb;    background-color: white;    padding: 4px 24px;    margin-left: 30px;    font-weight: normal;    height: 32px;    font-size: 18px;    text-transform: uppercase;    line-height: 32px;    font-family: calibri;    color: black;    text-decoration: none;    cursor: pointer;  }    #buttons {    left: 0;    right: 0;  }
<body class="page">    <div id="header">        <div id="buttons" style="position: absolute; top: 83px;">        <a class="" href="/home/newjob">new job</a>        <a class="active" href="/">job list</a>        <a class="" href="/home/pricing">pricing</a>        <div class="hr"></div>      </div>      </div>    <div id="content">      </div>  </body>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more