css width and height doesn't work

Question

I have the following code, but width/height of spans doesn't really work.

HTML

<div id="amount" class="ch_field3">
<span id="ch_minus">-</span> 3 <span id="ch_plus">+</span>
</div>

CSS

.shop_chekout_item{min-width: 100%; float: left;}
.shop_chekout_item .ch_field3{display: block;float: left; width: 20%;}

.shop_chekout_item #ch_plus,.shop_chekout_item #ch_minus{
background: #ccc; 
width:  20px; /*no effect...*/
height: 20px; /*same here :(*/
cursor: pointer}

Answer 1

Spans are display: inline; by default.

To get them to listen to a height and width, you'll need to add display: block;.

Answer 2

Add a property display: block; right before the width and height setting. Should work now, as by default the spans are display: inline;

Answer 3

Because the CSS selectors are namespaced with .shop_chekout_item, a wrapping div needs to be added around the HTML code. Then it will work. jsfiddle

HTML:

<div class="shop_chekout_item">
  <div id="amount" class="ch_field3">
    <span id="ch_minus">-</span> 3 <span id="ch_plus">+</span>
  </div>
</div>

Tips:

1. Use display: inline-block; to avoid having to float:left;
2. Use text-align: center; & vertical-align: middle; to make it look nice. :)

CSS:

.shop_chekout_item{min-width: 100%; float: left;}
.shop_chekout_item .ch_field3{display: block;float: left; width: 20%;}

.shop_chekout_item #ch_plus,
.shop_chekout_item #ch_minus{
  background: #ccc; 
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width:  20px;
  height: 20px;
  cursor: pointer;
}