Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    311
    Thanks
    0
    Thanked 1 Time in 1 Post

    <div> expanding too far

    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?

    PHP Code:
    <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>

    </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>
    </div>


    <?php
      $show_display_category
    ->MoveNext();
    // !EOF
    ?>
    </div>
    The <div> that I have problems with is
    PHP Code:
    <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: http://174.132.166.188/~mpeople/

    Thanks

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    just set the width of that div sir.. and your done..

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    311
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    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...

    jhay


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •