auto expand shopping cart with css

Question

Hi...

Anyone knows how to create an auto expandable shopping cart icon with css? The quantity should be inside the cart just like amazon.

the width of the cart increases based on the number of items. eg: if the cart contains only 1 product, the cart widh will be less and the 1 will be inside the cart. And if the quantity is 1000 then the width of the cart should be more and 1000 should be inside the cart. –

Answer 1

Use min-width and max-width instead of normal width. The element will expand automatically.

Answer 2

Did it like this... and it's working.

.cartLeft{ display: block; float: left; background: url(images/cartLeft.gif) no-repeat; width: 24px; height: 30px;

} .cartMiddle{ display: block; float: left; background: url(images/cartMiddle.gif) repeat-x; height: 30px;

} .cartRight{ display: block; float: left; background: url(images/cartRight.gif) no-repeat; width: 18px; height: 30px; }

Answer 3

I think what you trying to get done here is keep the div width as small as possible but expand as needed. The height is something that will just work for what you need.

What you should do is add margin:auto;

Here is an example:

<div style="margin:5px auto;">Stuff</div>

This should do exactly what you need.