Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid height from content or 100% height image

    Hi everyone,

    I'm trying to have a fluid div, containing two columns, with the height inherited from whichever column has the greatest height.
    The first 'column' is the nav, and increasing or decreasing the list items does set the containing divs height - so far so good.
    The second 'column' contains an image. The image is set to 100% width and height. But the containing div doesn't pick up the image height and expand accordingly.

    Also, I've got transparent 'stripes' that sit across the top of the image. In FF they stay at 100% of the height of the image at any window size. But IE doesn't pick up the height, and they stay at just one line height.

    The only site I found that addressed this exact issue, said it couldn't be done..... Am I asking the impossible? It seems like a resonable design to me!

    Many thanks for any help | advice | links etc.
    Charlotte.

    HTML code below, CSS file attached.

    Code:
    <body>
    <div id="headercontainer">
    <div id="containerleft">
    <div class="mainmenu">
    <ul>
    <li>Visiting</li>
    <li>Learning About</li>
    <li>Looking After</li>
    <li>Living In</li>
    <li>Visiting</li>
    <li>Learning About</li>
    <li>Learning About</li>
    <li>Looking After</li>
    <li>last one</li>
    </ul>
    </div>
    </div>
    <div id="containerright"><div id="column1">1</div><div id="column2">2</div><div id="column3">3</div><div id="imagecontainer"><img src="homepage630.jpg" width="100%" height="100%"/>
    </div></div>
    </div>
    </body>
    Attached Files Attached Files

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    You have a problem here:

    #containerright
    {
    width:80%;
    height:inherit;
    float:right;
    background-color: #aeaa91;
    position:absolute;
    left:20%;

    }

    It is not going to pick up the height of the content if you specify a height. So take the ehight out.

    Then you have contradictory code. The browser can float it, or or it can position it; it can't do both and still give you anything that will pass for correct rendering. If you want it 20% to the right of the normal float position then get rid of the position and use margin-right:20% which is compatible with the float.

    If you still have a problem then post a link to the page. It i seasier to solve these problems if I can see them. Getting them the same height will probably require require script because the normal behaviour of div is to either accept a fixed value and be static or dynamically size to content. if you want siblings to be the same height you have to either give the them same specific height, or use scripting to set them both to he height of the tallest one.

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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