View Full Version : <div> expanding too far

03-04-2009, 08:18 PM
I cannot seem to figure out why this <div> is expanding 100% when it should be expanding only the length of the text in it. Can someone clue me in as to why?

<div class="centerColumn" id="indexDefault">

<div style="float:left;width:300px;font-family:times;font-size:15px; font-weight:regular;line-height:25px"> <!--left column-->
<div style="height:34px;width:296;background-image:url(../images/Lheader.jpg);margin-bottom:6px"></div>

<div style="width:96%;position:relative;left:7px;margin-bottom:20px"><span style="font-family:times;font-size:16px;color:#8a7a57;;">WE ARE SORRY</span> for your loss and hope you find our products a way in which you can remember your loved one for years to come.
The costs to remember a loved one are excessive. At TheMemorialPeople.com we supply high quality memorials.</div>

<div style="width:100%;height:20px;background-image:url(../images/Lfooter.jpg);background-repeat:no-repeat;margin-bottom:7px;"></div>

<div style="width:290px;height:326px;background-image:url(../images/cbg.jpg)">
<div style="width:17px;height:48px;background-image:url(../images/left_step.jpg);position:relative;left:-16px;top:15px"></div>
<div style="background-image:url(../images/stepbg.png);height:42px;position:relative;top:-33px;padding-right:5px">ads;</div>
<!--<div style="width:29px;height:41px;background-image:url(../images/right_pass.png);position:relative;top:-58px"></div>-->



<div style="float:right;width:500px;position:relative;left:10px">
<!-- flash element here -->

<div style ="width:100%;height:370px;background-color:#cf8a27;">FLASH ELEMENT HERE</div>

// !EOF

The <div> that I have problems with is
<div style="background-image:url(../images/stepbg.png);height:42px;position:relative;top:-33px;padding-right:5px">ads;</div>

The site that I am working on is this:


03-05-2009, 01:02 AM
just set the width of that div sir.. and your done..

03-05-2009, 01:07 AM
That would work ok except for the fact that this will be dynamic text that will change from time to time. So I need to conform to the width of the text

03-05-2009, 01:09 AM
If you don't give it a width, it's going to be as wide as it's container. You could try display:inline; if you want it to fit different length texts... but that will collapse in ways you probably don't want.

You should really not use inline styles - they're as pain to debug!

03-05-2009, 05:34 AM
well in some point, you will be forced to set a width some out there... to attain your target..

well setting the width of the column your having a problem with will initially solve this.. but hey.. up to you.. just my 2 cents..

maybe you can do a javascript or php to somewhat cut the the content at a certain with or length...

well see again i said.. cut and set a a certain length.. even it's not css or html.. the thing is you gotta set a boundary on the content..

anyways, good luck...