Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member Mateo's Avatar
    Join Date
    Jan 2006
    Location
    Chicago
    Posts
    31
    Member #
    12321
    New to CSS. Wondering how you would go about setting a minimum height for a div. Say I want the div to have a 300px height so that when no content is in there it will be at least 300 high but then when content is added dynamically, the height will adjust accordingly. Does that make sense? Any help would be appreciated.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Sure ...

    You'll find some hacks here:
    http://www.google.com/search?q=css+m...ht&btnG=Search

    Or, it's just as easy to use a transparent image ...

    1) Do not specify the height of the <div>
    2) Make a transparent .gif image 1x1 pixel.
    3) Call the image "pixel.gif" .. Upload that .gif image.

    <div id="content">
    <div style="float: left;"><img src="pixel.gif" width="1" height="300" alt="" /></div>
    your other stuff here
    </div>

    Now, it will always be at least 300 pixels high and you won't see the
    1 X 300 image since it's a transparent .gif.


  4. #3
    Member Mateo's Avatar
    Join Date
    Jan 2006
    Location
    Chicago
    Posts
    31
    Member #
    12321
    Wow. That was fast. Perfect, thanks!

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    It bears noting that if you want to go for a standards-based solution, you can use `min-height: 300px'. This doesn't work in IE <7 (I don't remember if it does in IE7); however, you can use the IE7 script to enable support for it.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    There are so many things that need fixing, maybe by this time
    next year, things might start to come together. The need for
    standards is more important now than any other time in internet
    history.


  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Fingers crossed...

  8. #7
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    I believe IE interprets "height" as how "min-height" actually works, and Firefox (of course) renders both "height" and "min-height" properly.

    So, try making a CSS class both browsers will see with a height: 300px attribute, and then a class only Firefox can see with min-height: 300px.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  9. #8
    Senior Member
    Join Date
    Jul 2003
    Location
    Hillsboro, OR USA
    Posts
    116
    Member #
    2175
    I did a quick search on google. Maybe this helps:

    http://www.mezzoblue.com/archives/20.../minheight_fi/

  10. #9
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Previously I used expressions to overcome this problem with IE but I suppose I didn't really account for Safari's problems. At least that would solve the max-height problem as well.
    Hyperair


Remove Ads

Posting Permissions

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

Search tags for this page

css div at least height

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com