1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Simple CSS help needed

Discussion in 'General Programming Chat' started by cashcow, Dec 23, 2009.

  1. cashcow

    cashcow Junior Member

    Joined:
    Sep 15, 2008
    Messages:
    162
    Likes Received:
    22
    [​IMG]

    How come the border box is shorter than the image? What do I have to do to make the border box cover the image? (btw, I cannot change anything in class "post-content")
    Can anyone help please?
     
  2. blatt

    blatt Newbie

    Joined:
    Dec 27, 2008
    Messages:
    8
    Likes Received:
    5
    Check your PM, let me know if that works. :pcguru:
     
    • Thanks Thanks x 1
  3. cashcow

    cashcow Junior Member

    Joined:
    Sep 15, 2008
    Messages:
    162
    Likes Received:
    22
    Thanks Blatt, but unfortunately, it didn't work...
     
  4. rubberband

    rubberband Registered Member

    Joined:
    Oct 11, 2009
    Messages:
    90
    Likes Received:
    84
    Because that's probably the height #post-content tells it to be. Why wouldn't you be able to change those properties?
     
  5. MuonTrail

    MuonTrail Registered Member

    Joined:
    Mar 5, 2009
    Messages:
    96
    Likes Received:
    93
    Try adding a div with style="clear:both" like below. That should do it.

    Code:
    <DIV class=post-content><div>
    
    <img style='float:left;' src="bas08.jpg" border="0"/>This premium chocolate assortment is meant for true connoisseurs. The confections in this basket were crafted by the world-famous Ghirardelli, San Francisco's first chocolatier.
    
    [B]<div style="clear: both;"></div>[/B]
    
    </div></DIV>
     
    • Thanks Thanks x 1
  6. kanshu

    kanshu Regular Member

    Joined:
    Sep 11, 2009
    Messages:
    212
    Likes Received:
    28
    Occupation:
    Computer programmer
    Location:
    Cebu City, Philippines
    Home Page:
    Yup. This is a clearing problem. An inner floated <div> container must have a trailing "clear" in order for the parent or outer <div> to fully enclose it. Follow MuonTrail's suggestion.
     
    • Thanks Thanks x 1
  7. cashcow

    cashcow Junior Member

    Joined:
    Sep 15, 2008
    Messages:
    162
    Likes Received:
    22
    MuonTrail, kanshu you 2 rock!

    btw, does this trick work for both firefox and ie? my ie 6 seems to mess up a little bit...
     
  8. kanshu

    kanshu Regular Member

    Joined:
    Sep 11, 2009
    Messages:
    212
    Likes Received:
    28
    Occupation:
    Computer programmer
    Location:
    Cebu City, Philippines
    Home Page:
    Yup. It works for both Firefox and IE.

    If you are still experiencing problems with IE, it may be caused by something else.
     
  9. Forsaken

    Forsaken Newbie

    Joined:
    Dec 23, 2009
    Messages:
    3
    Likes Received:
    0
    Your problem lies with using float:left on your img.
    Floats ignore the structure of everything around them...
    Position your image another way (e.g. within another div aligned left etc)
     
  10. deign23

    deign23 Regular Member

    Joined:
    Apr 21, 2009
    Messages:
    286
    Likes Received:
    78
    Location:
    Philippines
    Home Page:
    perhaps you wanna try using height and width of the border?