SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ingreasing height with text

    Hi
    How can I make the div #suurkast to ingrease its height when the text in it gets longer?

    #suurkast {
    width: 400px;
    height: 300px;
    background-color: #CCC;
    float: left;
    }

    the site

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try

    #suurkast {
    width: 400px;
    min-height: 300px;
    background-color: #CCC;
    float: left;
    }
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
     #suurkast {
    width: 400px;
    height: auto !important;
    height: 300px;
    min-height: 300px;
    background-color: #CCC;
    float: left;
    }
    the !important rule will keep it auto for non-IE/Windows browsers, which is what you need for min-height to work.

  4. #4
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *makes note of this*

    thanks Vinnie
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.
    But now there is another problem. How can I make two divs, that are next to each other, ingrease their height at the same time. Confusing text, but hope you understand.

    #suurkast {
    width: 400px;
    height: auto !important;
    min-height: 300px;
    background-color: #CCC;
    float: left;
    }
    #kylgkast {
    width: 200px;
    height: auto !important;
    min-height: 300px;
    background-color: #666;
    float: left;
    }

    When I put text in #suurkast and it gets longer, is it possible to make #kylgkast also to ingrease its height the same way?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,381
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only element that bases its height dependending on another element is a table-cell. So what you ask isn't an easy thing to do in css.

    The easiest way to make two divs appear to grow together is to use a repeating background image on the outer that imitates one of the columns. You then just place your existing elements inside the outer (without background colours)

    Otherwise you have to resort to complicated negative margin techniques (or 200px wide border techniques).

    Here are some example from my 3 col demo that show repeating background image and a negative margin technique (no image required).

    http://www.pmob.co.uk/temp/2column_simple_1.htm
    http://www.pmob.co.uk/temp/2columnce...equalising.htm
    http://www.pmob.co.uk/temp/2equalisingfloats2.htm

    In your example the easiest solution would be to create a 200px x 5px image of the required background colur and repeat it down the y axis of a container that holds both the floats. You then just let the floats stretch the outer container as required and of course the repeating background image grows with it.

    Paul


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
  •