CSS div width не работает

У меня странная проблема. Одна из моей ширины div не работает. Мой CSS похож на

.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;
}

И мой файл HTML

<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>

Но как вы можете видеть в прикрепленном изображении, моя ширина div product_info не 850px, Whats wrong

Ответ 1

Попробуйте

display: block

Он должен работать

Ответ 2

display: flex в родительском элементе также меняет работу width и height. Вместо этого вы можете использовать min-width и/или max-width или отключить сжатие/увеличение с помощью flex: 0 0 auto;

Они в основном теряют первоначальное значение и будут действовать как flex-basis, см. geddski: разница между шириной и гибкостью

Ответ 3

Надеюсь, вы выглядите так: - http://tinkerbin.com/MU2CUpre

На самом деле вы использовали floating в своем child div's и didnt clear ваш parent div. Таким образом, у меня cleared ваш parent div через overflow:hidden; в родительский div и cleared этот дочерний div .product_details тоже работает отлично...

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;
}

Ответ 4

Используйте свойство clear: both;.

.product_info {clear: both;}

Ответ 5

Привет, теперь определите свой класс .product_into overflow:hidden;

Живая демонстрация

как этот

.product_info{
overflow:hidden;
}

=======

или вариант 2

определить один css

Css

.clr{
clear:both;
}

Поместите этот div в последнюю строку закрыть класс .product_info

<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>

Живая демо-версия 2