html - Alignment issue with the content inside the two inline div? -

-

i have 2 div , inside div multiple div there , facing the alignment issue whatever content inside div not proper align.

css code:

.breadcrumb-nav{     margin-left: 230px;     left: 70px;     top: 70px;     width: 1291px;     height: 66px;     opacity: 100%;     background: #efefef; }  .grid{      margin-left: 230px; }  /*left section styling */  .left-content{     top :104px;     left: 151px;     opacity: 100%;     height: 20px;     width: 194px; }  .shown-device{     line-height: 20px;     width :147px;     font-size: 16px;     color :#101010;     margin-top: 15px;     margin-left: 40px; }   .filter-by{     left: 80px;     top: 177px;     width: 194px;     height: 28px;     background: #d8d8d8;     margin-top: 6px; }  .filter-by-heading-left{     left: 86px;     top: 182px;     height: 17px;     padding:5px 134px 6px 6px;     font-weight: bold;     font-size: 13px;     line-height: 17px; }  .filter-by-heading-right{     left: 225px;     top: 182px;     height: 17px;     padding:5px 6px 8px 133px;     font-size: 11px;     line-height: 17px; }  /*right section styling*/  .right-content .filter{     margin-left: 229px;     margin-top: 18px; }  .filter-heading{     width: 39px;     height: 16px;     font-size: 13px;     line-height: 16px;     color: #666666;  }

html code:

<div class= "notification-content">     <div class = "breadcrumb-nav">         <h1>devices</h1>     </div>     <div class = "grid">         <div class = "left-content">             <p class ="shown-device"><strong>1487</strong> device shown</p>             <div class = "filter-by">                 <p class ="filter-by-heading-left">filter by:</p>                 <a class =" filter-by-heading-right">clear all</a>             </div>         </div>         <div class = "right-content">           <div class = "filter">                 <p class ="filter-heading">filters:</p>           </div> <!--             <div class = "soritng ">                 <select class = "sorting-select-box">                     <option>test1</option>                     <option>test2</option>                     <option>test3</option>                 </select>             </div> -->          </div>     </div> </div>

i attaching screen shot clear all has come inline filter all: , filter has come device shown highlightedenter image description here in attachment.

try see link. and, think that, need 2 columns layout. can find lot of examples how googling.

i changed:

.left-content{     top :104px;     left: 151px;     opacity: 100%;     float: left;     width: 60%;     /*height: 20px;*/     /*width: 294px;*/ } .shown-device{     line-height: 20px;     width :147px;     font-size: 16px;     color :#101010;     /*margin-top: 15px;*/     margin-left: 120px; } .filter-by-heading-left{     /*left: 86px;     top: 182px;     height: 17px;     padding:5px 134px 6px 6px;     font-weight: bold;     font-size: 13px;     line-height: 17px;*/ } .right-content .filter{     float: right;     /*margin-left: 329px;*/     width: 40%;     margin-top: 6px; }   flag

there many solutions,you can see this


Comments

Post a Comment

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook.
Read more

customize file_field button ruby on rails -

-
i'm trying rid of ugly button rails has default file upload. want add glyphicon <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> this didn't work , have tried other things in different post saw on page, don't attach file. as suggested here bootstrap filestyle , can use bootstrap's filestyle style file upload buttons. step-1: add layout application.html.erb i have added bootstrap filestyle library cdn. should make sure have both jquery , boostrap loaded. <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> step-2: add corresponding js file: $(":file").filestyle({input: false}); step-3: image_url file field follows: <%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml
Read more