PDA

View Full Version : How do I stop a div with background from stretching?



cb2004
Sep 27th, 2010, 11:33 AM
I have a containing div which is floated right and then 2 divs within. The text within the top div is longer than the text in the bottom, however the lower div needs a background but not stretched all the way. Code is below:

CSS


#hir { float: right; text-align: right; }

#sesh { margin-bottom: 12px; }

#cart { background: #ED174D; }

HTML


<div id="hir">
<div id="sesh">WELCOME Log in / Reister</div>
<div id="cart">YOUR CART 0.00</div>
</div>

Cart is with the background but is stretching. Any help would be appreciated.

conware
Sep 27th, 2010, 06:20 PM
Hi cb2004, I think I know what you want.
Sins you have "YOUR CART 0.00" in a id I would suggest to make a span class inside that div and give the span class the red background color.
That should give you the effect you want.

Here is my example:

CSS:


#hir { float: right; text-align: right; }

#sesh { margin-bottom: 12px; }

#cart { }

.cart { background: #ED174D; }

HTML:

<div id="hir">
<div id="sesh">WELCOME Log in / Reister</div>
<div id="cart"><span class="cart">YOUR CART 0.00</span></div>
</div>

Major Payne
Sep 28th, 2010, 10:42 AM
Control your divs by setting widths and heights to them. Browsers have no idea what you want an usually if its something inherited, that's what you get. CSS is for presentation of your pages, but you have to use it to tell the browsers how you want your page to look.