CSS div width not working

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 enter image description here

Put your code in a jsFiddle, so we could all test it... Have you checked it in other browsers too? — ZAD
– ZAD, Commented Nov 5, 2015 at 15:48

Tamas Hegedus · Accepted Answer · 2024-04-22 12:41:03Z

97

display: flex on the parent element changes what the width and height properties do on the child. Disable flex shrinking/growing of the child 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>

edited Apr 22, 2024 at 12:41

answered Jun 27, 2018 at 18:33

Tamas Hegedus

30.1k12 gold badges67 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pedro Martins Over a year ago

Thank you :) flex: 0 0 auto probably the best for this case

ruslaniv Over a year ago

I just spent two hours troubleshooting why the width of my flex item was not 30% of its parent using variations of width property. flex: 0 0 30%; finally did the trick!

San Over a year ago

flex: none = flex: 0 0 auto

sooohka Over a year ago

Clean and best explanation

Vishal · Accepted Answer · 2014-01-30 09:39:15Z

40

Try

display:block

It should work

answered Jan 30, 2014 at 9:39

Vishal

82612 silver badges20 bronze badges

2 Comments

theQuestionMan Over a year ago

You can also do display:inline-block if you want other elements to be inline.

mikasa Over a year ago

can you please also explain your solution?

Parth Developer · Accepted Answer · 2021-05-06 05:43:04Z

4

display: inline-block; Worked for me

Example:

label {
    min-width: 90px;
    display: inline-block;
}

answered May 6, 2021 at 5:43

Parth Developer

1,9151 gold badge19 silver badges33 bronze badges

Comments

Shailender Arora · Accepted Answer · 2012-11-05 08:29:32Z

0

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

edited Nov 5, 2012 at 8:29

answered Nov 5, 2012 at 8:22

Shailender Arora

7,8182 gold badges34 silver badges35 bronze badges

1 Comment

aggregate1166877 Over a year ago

The link you provided is broken

Brian Ray · Accepted Answer · 2016-03-18 14:37:25Z

0

Use the clear: both; property.

.product_info {clear: both;}

edited Mar 18, 2016 at 14:37

Brian Ray

1,4913 gold badges20 silver badges20 bronze badges

answered Mar 18, 2016 at 14:06

Rajeesh

11 bronze badge

Comments

Rohit Azad Malik · Accepted Answer · 2012-11-05 08:26:15Z

-1

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

edited Nov 5, 2012 at 8:26

answered Nov 5, 2012 at 8:20

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

1 Comment

ZAD Over a year ago

The live demo is not working! Please link a jsFilddle and not paid per click sites!!!

Collectives™ on Stack Overflow

CSS div width not working

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

=======

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

Comments

1 Comment

Comments

=======

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related