Nicht sicher, warum Div nicht nach rechts schwebt

Ich habe ein Problem mit einem bestimmten Div, das nicht nach rechts schweben wird. Ich habe versucht, die div und andere Wege zu entfernen, und doch funktioniert es immer noch nicht.Nicht sicher, warum Div nicht nach rechts schwebt

Hier sind die folgenden CSS und HTML-Code, ich verwende:

CSS:

  #sidebarright{ 
       float: right; 
       width: 30%; 
       padding: 0; margin:0; 
       padding-top: 20px; 
      } 

    .resstyle{ 
    font-size: 18px !important; 
    font-weight:bold; 
       margin: 0 0 7px 0; 
       padding-left: 20px; 
      } 
    #wrapper { 
    width: 940px; 
    height:100%; 
    margin: 0 auto; 
    } 
    #banner-wrapper{ 
     display:block; 
     padding:0; 
     margin-left:auto; 
     margin-right:auto; 
     background:#FFF; 
     background-image: url(./img/Banner.jpg); 
     height:14.6%; 
     padding-bottom:44px; 
    } 


HTML: 

    <div id="wrapper"> 

     <!-- banner-wrap starts here --> 
     <div id="banner-wrapper">          
        <!-- Menu Tabs --> 

       <ul> 
        <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Support.cfm"><span>Support</span></a></li> 

       </ul> 
     </div> 

     <div id="sidebarright"> 
      <a href="#"><img class="button" src="img/Pro.jpg" alt="Pro" /></a> 
      <div class="resstyle">Resources</div>  
     </div> 
    </div> 

UPDATE: 

<!---Temporary styling, to test---> 
<style> 
.img-banner{ 
    margin-left:auto; 
    margin-right:auto; 
    display:inline; 
} 

body{ 
    position:relative; 
    background-color:white; 
    margin: 0; 
    padding: 0; 
} 

ul{ 
    list-style:none; 
} 

a{ 
    color: white; 
    text-decoration: none; 
    font-family: Sherwood !important; 
} 

.navbar-buttons{ 
    padding-top:20px; 
    padding-right:20px; 
    text-align:right; 
    list-style:none; 
    margin:0 auto; 
    overflow:hidden; 
    <!---background-image: url(./img/Banner.jpg);---> 
} 

#wrapper { 
    width: 940px; 
    height:100%; 
    margin: 0 auto; 
} 

#banner-wrapper{ 
    display:block; 
    padding:0; 
    margin-left:auto; 
    margin-right:auto; 
    background:#FFF; 
    background-image: url(./img/Banner.jpg); 
    height:14.6%; 
    padding-bottom:44px; 
} 

img.no-border{border: 0;} 

.img-banner{ 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
} 

<!---/**********************Left Side of Page****************************/---> 
#sidebarleft{ 
    width: 30%; 
    padding-top:30px; 
    padding-right: 20px; 
    display:inline; 
    float:left; 
} 

#sidebarleft ul.menu{ 
    list-style:none; 
    padding:0; 
    margin:10px 0 10px 0; 
} 

.leftbuttons1{ 
    background-image: url(./img/Button_1.jpg); 
    background-repeat:no-repeat; 
    padding: 5px 10px 10px; 
} 

.leftbuttons1 a{ 
    color:grey; 
    font-size:10pt !important 
} 

.leftbuttons{ 
    background-image: url(./img/Button_1.jpg); 
    background-repeat:no-repeat; 
    padding: 5px 0 10px 10px; 
} 

.leftbuttons a{ 
    color:grey; 
    font-size:10pt !important 
} 

.leftbuttons2{ 
    background-image: url(./img/Button_2.jpg); 
    background-repeat:no-repeat; 
    padding: 7px 0 10px 7px; 
} 

.leftbuttons2 a{ 
    color:grey; 
    vertical-align:center; 
    font-size: 10pt !important; 
} 
    <!---/**************************************************/---> 

<!---/***********************Right Side of Page***************************/---> 
#sidebarright{ 
    float: right; 
    width: 30%; 
    padding: 0; margin:0; 
    padding-top: 20px; 
} 
<!---/**************************************************/---> 

img.buttonUlti{ 
    float:right; 
    padding-top:30px; 
    padding-bottom:15px; 
    border-radius:18px; 
} 

.shiftRes{ 
    margin-left:27px; 
    padding-top:40px; 
} 

.departstyle{ 
    font-size: 18px !important; 
    font-weight:bold; 
    padding-left: 10px; 
    margin: 0 0 7px 0; 
    padding-top: 17px; 
} 

.resstyle{ 
    font-size: 18px !important; 
    font-weight:bold; 
    margin: 0 0 7px 0; 
    padding-left: 20px; 
} 
</style> 

<div id="wrapper"> 

    <!-- banner-wrap starts here --> 
    <div id="banner-wrapper">          
       <!-- Menu Tabs --> 

      <ul> 
       <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>Support</span></a></li> 

      </ul> 
    </div> 

    <div id="sidebarright"> 
     <a href="https://n11.ultipro.com/logout.aspx"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a> 
     <div class="resstyle">Resources</div>  
    </div> 

<div id="sidebarleft"> 
     <ul class="menu"> 
      <li class="departstyle">Departments</li> 
      <li class="leftbuttons1"><a href="#">Claims</a></li> 
      <li class="leftbuttons"><a href="#.cfm?">Credentialing</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Customer Services</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Data Management</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Decision Support</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Employee Services</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Finance</a></li> 
      <li class="leftbuttons"><a href="#.cfm">HCC</a></li> 
      <li class="leftbuttons2"><a href="#.cfm">Health System <br />Engagement and<br /> Contracting</a></li> 
      <li class="leftbuttons"><a href="#.cfm" target="_blank">Mail Room</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Marcom</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Medical Management</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Network Management</a></li> 
      <li class="leftbuttons"><a href="#.cfm">NextGen</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Operations</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Physician Resources</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Provider Relations</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Quality Management</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Quality Improvement</a></li> 
      <li class="leftbuttons"><a href="#.cfm">Risk Management</a></li>    
     </ul> 
</div>

Jede Hilfe würde geschätzt, Dank

Quelle

2016-06-23 Roberto Flores

Die div die schwimmt genau hier https://jsfiddle.net/mqnt4fxg/ –

@HunterTurn Ich sehe, dass auf der Jfiddle, die Sie zur Verfügung gestellt, ich verstehe nicht, warum in meinem Ende es nicht funktioniert –

Suchen Sie etwas wie folgt: https://jsfiddle.net/gy4bd905/2/ –

Also, mit Ihren aktualisierten Code wird Ihre CSS nicht angewendet werden, da die Kommentare, die Sie verwenden für CSS nicht korrekt sind. Sie verwenden HTML-Kommentare in CSS anstelle des richtigen /* this is a comment */

Unzulässig:

<!---/**************************************************/--->

Valid:

/**************************************************/

JSFiddle

Quelle

2016-06-23 17:32:57

Ich bin auf einem cfm (Coldfusion, die ich immer noch versuche, herauszufinden, wie die css-Datei eine cfm-Datei anwenden) und so verwende ich diese Kommentare, aber Sie sind richtig und das hat funktioniert. Danke, dumm von mir, dass ich das nicht gesehen habe –

Wenn Sie es möchten sich von der schweben #banner-wrapper, müssen Sie auch diese floaten (float: links ) and give it width: 70% `(und entfernen Sie die automatischen Ränder), so dass sie nebeneinander passen:

http://codepen.io/anon/pen/gMLVKV

Quelle

2016-06-23 16:57:53 Johannes

Ich möchte nicht aus dem Banner, sondern aus dem Banner und den Ressourcen und Button, die folgen würde, um nach rechts schweben, aber sie nicht –

Eigentlich die erste Geige, dass Hunter Turner hat getan. Nicht sicher, warum es nicht funktioniert –

Aber das ist es, was es bereits macht (in Ihrem Code) -? – Johannes

Nicht sicher, warum Div nicht nach rechts schwebt

Antwort

Verwandte Themen