html - 不确定为什么 Div 不向右浮动

Question

我遇到了一个不会向右浮动的特定 div 的问题。我已经尝试删除 div 和其他方法，但它仍然不起作用。

这是我正在使用的以下 css 和 html 代码:

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>

任何帮助将不胜感激，谢谢

Answer 1

因此，对于您更新的代码，您的 css 没有被应用，因为您使用的注释对于 css 是不正确的。你在 css 中使用 HTML 注释而不是正确的 /* this is a comment */

无效:

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

有效:

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

JSFiddle