css 两个 div 向左浮动。右侧 div 未覆盖剩余空间

Question

我有两个 div，leftSide 和 rightSide，它们的父元素是 innerContainer。我已将两个 div 都 float 到左侧。它们并排出现，但右侧 div 未覆盖父 div 的剩余空间。

我尝试使用 overflow:hidden 并指定了宽度，但它仍然具有相同的宽度。

我的CSS:

  #container {
  overflow:auto;
  margin:10px auto;
}

   #innerContainer{
        margin:10px auto;   
        width:1200px;
        background:#FFFFFF;
        border:2px solid #09F;
        overflow:auto;
}

 #leftSide{
overflow:auto;
float:left;
width:700px;
border:3px solid #F00;
 }

 #topheaderProfile{
margin:5px;
border:1px solid #F00;
  }

   #middleCompanyDescription{
margin:5px;
border:1px solid #333;
  }

  #Profile{
text-align:left;
  }

 .ProfileBox{
padding:10px;
cursor:pointer;
overflow:hidden;
text-align:left;
word-break:break-all;
word-wrap:break-word;
 }

 .CompanyLogo{
float:left;
padding:5px;
 }

 .rightCover{
overflow:auto;
padding:1px;
 }

  .companyTitle{
color:#36F;
font-size:24px;
overflow:hidden;
 }

 .companyTitle a{
text-decoration:none;
 }

 .CompanyRating{
float:left;
margin-top:3px;
 }

 .Companylikedicon{
overflow:hidden;
float:right;
margin-left:10px;
 }

.Companycommenticon{
float:right;
margin-right:10px;
}



.CompanySlogan{
color:#999;
word-break:break-all;
word-wrap:break-word;
clear:both;
 }



  #rightSide{
width:100px;
border:1px solid #000;
  }

我的 HTML:

  <div id="container">
     <div id="innerContainer">

           <div id="leftSide"> 

        <div id="topheaderProfile">
            <div id='Profile'>
                <div class='ProfileBox'>
                    <div class='CompanyLogo'><img src='../Images/defaultPic.jpg' width='90' height='90'/></div> 
                    <div class='rightCover'>
                        <div class='companyTitle'>My Company</div>
                        <div class='CompanyRating'>
                                            Rating : <img src='../Images/FilledStar.png' width='20' height='20' id='Star1' />       
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star2' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star3' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star4' />
                                            <img src='../Images/EmptyStar.png' width='20' height='20' id='Star5' />
                         </div>

                         <div class='Companylikedicon'><img src='../Images/LikedIcon.png'  width='25' height='25' /> 100</div>
                         <div class='Companycommenticon' ><img src='../Images/comment.png'  width='25' height='25' /> 100</div>

                         <div class='CompanySlogan'>This is the best offer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the worldffer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the world.</div>
                   </div>

               </div>    <!--ProfileBox-->
            </div>
           </div><!--TopHeeaderProfile-->

    <div id="middleCompanyDescription">
sadasdsad
    </div>




         </div>     <!--LeftSide-->


        <div id="rightSide">
          sadasdasdasd
        </div>


     </div>


 </div>

好的，我找到了问题。还有另一个 css 文件包含与此文件中相同的 id 名称。这是导致问题的原因。该文件的属性正在此处应用。感谢大家的帮助。

Answer 1

I tried using overflow:hidden and also specified the width but still it is of the same width.

如果您希望#rightSide 填充剩余空间，请使用overflow: hidden 但不要指定任何width。

参见: http://jsfiddle.net/thirtydot/Yuxzs/

#rightSide {
    overflow: hidden;
    border: 1px solid #000;
}​