SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot clnewbill's Avatar
    Join Date
    Nov 2007
    Location
    north central Alabama, USA
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set an elastic div height?

    Simple question, but I have Googled my little fingers off and can't find an answer.

    I need to set up full-width divs, each with an image and some associated text, that look like this:




    Should be easy. Set up a containing div with width:100%, height of image size plus a little, some padding, and float the image right.

    However, the client has manually resized the text in IE, so that setting the div height breaks the layout:




    If I remove the height parameter altogether, it really goobers things up because the image height and text height don't match up. The containing div shrinks to the height of the text and the image floats out in space.




    I've tried nesting divs and assiging various heights to things but can't seem to find the magic combination. I am obviously not searching on the correct terms, because I am not finding what I need.

    Short of using tables for each image-plus-text, is there anything else I can do to make the containing div stretch to hold all the huge text while not shrinking below the height of the image?

    tia -

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using min-height as opposed to height on the div

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy: don't set any height at all. Just make sure the div encloses any floated children, e.g., by having an element with clear:both before the </div> or by setting overflow:auto on the div (without an explicit height).

    An alternative way is to set a min-height on the div, instead of a height.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Zealot clnewbill's Avatar
    Join Date
    Nov 2007
    Location
    north central Alabama, USA
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, that was too easy. Thank you both!


Bookmarks

Posting Permissions

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