1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Make one "min-height" match another

Discussion in 'CSS' started by kinch, Feb 17, 2007.

  1. #1
    kinch, Feb 17, 2007 IP
    SEMrush
  2. naif

    naif Well-Known Member

    Messages:
    466
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Hmm... There isnt an easy way to do that using CSS. Div's dont work like how tables do. Both div's are independant of each other. So there is no way the navigation area can know how long the content area is. To achieve what you are trying to do, you'll need to use what is known as a faux column. Search for faux column on google, yahoo or whichever search engine you would prefer to use. I'll tell you in brief how this is done.

    I have read your HTML code though I havent read its CSS. What you have to do is, apply a background image to #content. Lets assume the width of #menu is 150 px and #contenttext is 600 px. So the width of #content would most propably be 750px. Lets say you want the menu to appear in blue and contenttext to appear in white. You'll need to create an image which will be 750px wide and its height should be 1px. The image from its left should be blue 150px and the rest 600px should be white. Save the image. Assuming you named it bckcontent.gif, add this code to #content

    
    #content {
    background: repeat-y url(images/bckcontent.gif);
    }
    
    Code (markup):
    And you are done :) Make sure you add a

    
    <div style="clear: both"></div>
    
    Code (markup):
    just after the closing </div> of #contenttext

    Thanks,
    -- Naif

    EDIT: One more thing, the min-height property isnt well supported by all browsers. Even IE doesnt support it..
     
    naif, Feb 17, 2007 IP
    kk5st likes this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,489
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #3
    All modern browsers support the min | max - height | width properties. IE is not a modern browser.

    cheers,

    gary
     
    kk5st, Feb 17, 2007 IP
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    296
    Best Answers:
    0
    Trophy Points:
    250
    #4
    Sadly, not even IE7 has changed the story.
    min-height and min-width still unsupported here..
     
    Clive, Feb 17, 2007 IP
  5. kinch

    kinch Peon

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Seems to work in IE7 for me with Windows Vista... I think I may just go with fixed heights, probbably be the best.
     
    kinch, Feb 17, 2007 IP
  6. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    296
    Best Answers:
    0
    Trophy Points:
    250
    #6
    I'm not on Vista yet,
    On my XP Pro IE7 seems to be ignoring them..
     
    Clive, Feb 17, 2007 IP