CSS - float：right - div height is so tight

Question

我正在尝试创建我的网页，但我遇到了浮动问题。

这里是我的代码HTML：

<div id="RightBox"><div class="Title">Informacje</div><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.<br><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.</div> 

    <div id="movie"> 
     <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a></div><br> 
     <div class="values"> 
      <div class="desc"> 
       <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
       <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
      </div> 
      <div class="img"> 
       <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg"> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
     <div> 
      <div style="float: right;"> 
       TEKST 1 
      </div> 
      <div style=""> 
       TEKST2 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </div> 
    <div id="movie"> 
     <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a></div><br> 
     <div class="values"> 
      <div class="desc"> 
       <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
       <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
      </div> 
      <div class="img"> 
       <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg"> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
     <div> 
      <div style="float: right;"> 
       TEKST2 
      </div> 
      <div style=""> 
       <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </div> 

和CSS代码：

#RightBox { 
font-size: 14px; 
font-family: 'Century Gothic'; 
margin-top: 1%; 
padding: 2%; 
border: 1px solid #D1EAF8; 
width: 30%; 
background: #FCFDFE; 
float: right; 
} 

#movie { 
padding: 1%; 
font-size: 14px; 
font-family: 'Century Gothic'; 
width: 60%; 
border: 1px solid grey; 
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
-khtml-border-radius:8px; 
border-radius:8px; 
margin-top: 4%; 
} 

#movie .Movie_Title a:hover 
{ 
text-decoration: underline; 
} 

#movie .Movie_Title a 
{ 
font-size: 20px; 
text-decoration: none; 
font-weight: bold; 
color: #33A1DE; 
} 

#movie .values { 
height: 200px; 
margin-bottom: 2%; 
} 

#movie .values .img { 
padding: 1px; 
height: 200px; 
width: 150px; 
} 

#movie .values .img .value { 
border-radius: 10px; 
-moz-border-radius: 10px; 
border: 1px solid #000; 
} 

#movie .values .desc { 
padding-right: 2px; 
width: 72%; 
height: 200px; 
float: right; 
display: table; 
} 

#movie .values .desc .more a:hover{ 
text-decoration: underline; 
} 


#movie .values .desc .more a{ 
font-weight: bold; 
color: #000; 
text-decoration: none; 
} 

#movie .values .desC#text { 
display: table-cell; 
vertical-align: middle; 
} 

这里是DEMO。

在左侧，我们可以看到两个div（查看DEMO并使用滚动）。第一格非常紧张，我不知道问题在哪里。第二格是可以的。

任何人都可以帮助我解决这个问题吗？

谢谢。

Answer 1

我觉得这个代码做的伎俩：

http://jsfiddle.net/3yja4tLj/

<div id="content" style="float:left"> 
<div id="RightBox"><div class="Title">Informacje</div><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.<br><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.</div> 
<div id="movies" style="float: left; width: 60%"> 
     <div id="movie"> 
      <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a></div><br> 
      <div class="values"> 
       <div class="desc"> 
        <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
        <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
       </div> 
       <div class="img"> 
        <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg"> 
       </div> 
       <div style="clear: both;"></div> 
      </div> 
      <div> 
       <div style="float: right;"> 
        <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
       </div> 
       <div style=""> 
        <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
       </div> 
       <div style="clear: both;"></div> 
      </div> 
     </div> 
     <div id="movie"> 
      <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a></div><br> 
      <div class="values"> 
       <div class="desc"> 
        <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
        <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
       </div> 
       <div class="img"> 
        <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg"> 
       </div> 
       <div style="clear: both;"></div> 
      </div> 
      <div> 
       <div style="float: right;"> 
        <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
       </div> 
       <div style=""> 
        <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
       </div> 
       <div style="clear: both;"></div> 
      </div> 
     </div> 
    </div> 
      </div> 
<div style="clear: both;"></div> 


#RightBox { 
font-size: 14px; 
font-family: 'Century Gothic'; 
margin-top: 1%; 
padding: 2%; 
border: 1px solid #D1EAF8; 
width: 30%; 
background: #FCFDFE; 
float: right; 
} 

#movie { 
padding: 1%; 
font-size: 14px; 
font-family: 'Century Gothic'; 
width: 100%; 
border: 1px solid grey; 
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
-khtml-border-radius:8px; 
border-radius:8px; 
margin-top: 4%; 
} 


#movie .Movie_Title a:hover 
{ 
text-decoration: underline; 
} 

#movie .Movie_Title a 
{ 
font-size: 20px; 
text-decoration: none; 
font-weight: bold; 
color: #33A1DE; 
} 

#movie .values { 
height: 200px; 
margin-bottom: 2%; 
} 

#movie .values .img { 
padding: 1px; 
height: 200px; 
width: 150px; 
} 

#movie .values .img .value { 
border-radius: 10px; 
-moz-border-radius: 10px; 
border: 1px solid #000; 
} 

#movie .values .desc { 
padding-right: 2px; 
width: 62%; 
height: 200px; 
float: right; 
display: table; 
} 

#movie .values .desc .more a:hover{ 
text-decoration: underline; 
} 


#movie .values .desc .more a{ 
font-weight: bold; 
color: #000; 
text-decoration: none; 
} 

#movie .values .desC#text { 
display: table-cell; 
vertical-align: middle; 
} 

Answer 2

请检查下面的代码，希望它会工作:)

#RightBox { 
 
    font-size: 14px; 
 
    font-family:'Century Gothic'; 
 
    margin-top: 1%; 
 
    padding: 2%; 
 
    border: 1px solid #D1EAF8; 
 
    width: 30%; 
 
    background: #FCFDFE; 
 
    float: right; 
 
} 
 
#movie { 
 
    padding: 1%; 
 
    font-size: 14px; 
 
    font-family:'Century Gothic'; 
 
    width: 60%; 
 
    border: 1px solid grey; 
 
    -moz-border-radius:8px; 
 
    -webkit-border-radius:8px; 
 
    -khtml-border-radius:8px; 
 
    border-radius:8px; 
 
    margin-top: 4%; 
 
} 
 
#movie .Movie_Title a:hover { 
 
    text-decoration: underline; 
 
} 
 
#movie .Movie_Title a { 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #33A1DE; 
 
} 
 
#movie .values { 
 
    height: 200px; 
 
    margin-bottom: 2%; 
 
} 
 
#movie .values .img { 
 
    float: left; 
 
    height: 200px; 
 
    width: 150px; 
 
    margin-right: 5px; 
 
} 
 
#movie .values .img .value { 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    border: 1px solid #000; 
 
} 
 
#movie .values .desc { 
 
    padding-right: 2px; 
 
    overflow: hidden; 
 
} 
 
#movie .values .desc .more a:hover { 
 
    text-decoration: underline; 
 
} 
 
#movie .values .desc .more a { 
 
    font-weight: bold; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
#movie .values .desC#text { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="RightBox"> 
 

 

 
    <div class="Title">Informacje</div> 
 
    <br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą sięa aplikacją służącą do obsługi aukcji Allegro. 
 
    <br> 
 
    <br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych. 
 
    <br> 
 
    <br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów. 
 
    <br> 
 
    <br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro. 
 
    <br> 
 
    <br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych. 
 
    <br> 
 
    <br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.</div> 
 
<div id="movie"> 
 
    <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a> 
 
    </div> 
 
    <br> 
 
    <div class="values"> 
 
     <div class="img"> 
 
      <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg" /> 
 
     </div> 
 
     <div class="desc"> \t <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
 
\t \t \t \t \t <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
 
     </div> 
 
     <div style="clear: both;"></div> 
 
    </div> 
 
    <div> 
 
     <div style="float: right;"> 
 
      <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
 
     </div> 
 
     <div style=""> 
 
      <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="movie"> 
 
    <div class="Movie_Title"><a href="#">Wada ukryta/Inherent Vice (2014)</a> 
 
    </div> 
 
    <br> 
 
    <div class="values"> 
 
     <div class="img"> 
 
      <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg" /> 
 
     </div> 
 
     <div class="desc"> \t <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
 
\t \t \t \t \t <span class="more"><a href="#">[ Więcej ] »</a></span></span> 
 
     </div> 
 
     <div style="clear: both;"></div> 
 
    </div> 
 
    <div> 
 
     <div style="float: right;"> 
 
      <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
 
     </div> 
 
     <div style=""> 
 
      <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div style="clear: both;"></div>