Szerokość działki CSS nie działa

Question

Mam dziwny problem. Jedna z szerokości mojego diva nie działa. Moje CSS jest jak

.product_info 
{ 
    margin-top:10px; 
    background:#444; 
    width:850px; 

} 
.product_image 
{ 
    width:350px; 
    text-align:center; 
    float:left; 
    padding:8px; 
    border:1px solid #e9e9e9; 
    background:#fff; 
} 
.product_details 
{ 
    float:left; 
    width:400px; 
    margin-left:25px; 
    font-size:14px; 
    font-family:"Helvetica"; 
    background:#d71414; 
} 

A mój plik HTML jest

<div class="product_info"> 
       <div class="product_image"> 

       </div> 

       <div class="product_details"> 
        <div class="selection"> 
        <form action="{$path_site}{$indeex_file}" method="post"> 
        Size 
        {foreach name = feach item = k from = $product_size} 
         <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size} 
        {/foreach} 


        </div> 

        <div class="selection"> 
        No. of pieces <input type="text" name="quantity"> 

        </div> 
        <div class="prc"> 
         <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00 
          </div> 

        <div class="buy_btn"><input type="submit" value="BUY" /></div> 
        </form> 
       </div> 
      </div> 

Ale jak widać na załączonym obrazie mój divproduct_info „s szerokość nie jest 850px, Co złego

Answer 1

Spróbuj

wyświetlacz : blok

Powinien działać

Answer 2

Cześć teraz zdefiniuj swoją klasę .product_intooverflow:hidden;

Live demo

tak jak to

.product_info{ 
overflow:hidden; 
} 

=======

lub opcji 2

ustalić jeden CSS

Css

.clr{ 
clear:both; 
} 

Umieść tę div w ostatnim wierszu zamykania.product_infoklasa

<div class="product_info"> 
       <div class="product_image"> 

       </div> 

       <div class="product_details"> 
        <div class="selection"> 
        <form action="{$path_site}{$indeex_file}" method="post"> 
        Size 
        {foreach name = feach item = k from = $product_size} 
         <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size} 
        {/foreach} 


        </div> 

        <div class="selection"> 
        No. of pieces <input type="text" name="quantity"> 

        </div> 
        <div class="prc"> 
         <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00 
          </div> 

        <div class="buy_btn"><input type="submit" value="BUY" /></div> 
        </form> 
       </div> 
        <div class="clr"></div> 
      </div> 

Live demo option two

Answer 3

Mam nadzieję, że wygląda tak: - http://tinkerbin.com/MU2CUpre

W rzeczywistości użyłeś floating w swoim child div's i zrobiłeś clear swój parent div. więc mam cleared swój parent div przez overflow:hidden; w nadrzędnej div i cleared to dziecko div .product_details również swoją pracę dobrze ......

CSS

.product_info 
{ 
    margin-top:10px; 
    background:#444; 
    width:850px; 
    overflow:hidden; 
} 

.product_details 
{ 
    float:left; 
    width:400px; 
    margin-left:25px; 
    font-size:14px; 
    font-family:"Helvetica"; 
    background:#d71414; 
    clear:both; 
} 

Answer 4

Użyj właściwości clear: both;.

.product_info {clear: both;}