SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict manipura's Avatar
    Join Date
    Apr 2001
    Location
    Calgary,AB
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping fixed height but stretching when needed

    If you notice the text overlapping the box on this page

    http://dailycarclips.com/index.php?l...11-gt2--part-2

    The code for that box is

    HTML Code:
    <div class="box" style="width:300px; height:161px; padding-top:3px; padding-left:5px;">
    I'm sure you can already assume what I want to do here.

    I want to made that box a certain height, unless the text (or a table inside the box) stretch further than that height.

    How would I do this?

  2. #2
    SitePoint Addict
    Join Date
    Feb 2005
    Location
    Brisbane, Australia
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    According to the specification, min-height is what you want. [1]

    Unfortunately, IE doesn't recognise min-height (as per my understanding), but you can get around this issue by using height instead. [2]

  3. #3
    SitePoint Addict manipura's Avatar
    Join Date
    Apr 2001
    Location
    Calgary,AB
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so I fixed the problem by taking out the 'height' attribute in the CSS and putting in the height of the box in the table attributes. Since with Tables if I set the height the added extra text will only stretch the table higher.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Are you saying you resorted to using tables because you couldn't get it to work?

    It's really quite a simple solution:
    Code:
    .box {
      min-height: 161px;
    }
    * html .box {
      height: 161px;
    }


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
  •