CSS div width not working - css

Question

I have a strange problem.One of my div's width is not working. My CSS is like
.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;
}
And My HTML file is
<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>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong

Answer 1

display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>

Answer 2

Try
display:block
It should work

Answer 3

display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}

Answer 4

i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
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 5

Use the clear: both; property.
.product_info {clear: both;}

Answer 6

Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<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