div's height expands when using percent units

Discussion in 'Web Design and Development' started by floyde, Mar 22, 2006.

  1. floyde macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #1
    Ok, so I have two divs... Each of them should be no more than 50% of the height of the browser window. Inside each div there is an image that is usually larger than the divs' height. My question is this: How can I prevent the divs from expanding vertically to fit the image's height?

    So far I've been able to achieve this by setting the divs' height to some fixed number and using overflow: auto; (this is not good enough since it needs to work on multiple resolutions). I can also make it work horizontally (50% of the windows width for each div), but never vertically. I hope I wasn't too confusing :confused: :D
     
  2. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    HTML and CSS don't work quite the same vertically as they do horizontally. I think what you are trying to do it just not plausible/possible without the use of Javascript.
     
  3. ChrisBrightwell macrumors 68020

    ChrisBrightwell

    Joined:
    Apr 5, 2004
    Location:
    Huntsville, AL
    #3
    Without some code to look at, we can't be much help.

    Did you try running it through HTML and CSS validators?
     
  4. floyde thread starter macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #4
    Thanks, I actually got it working somehow. I solved it by using position: absolute; on the image containers. Here's the code, it might be useful to someone some day:

    Note: there are actually 4 images (Andy Warhol style) instead of the 2 Images originally mentioned. Each of the images takes up one fourth of the window. The style is inside the markup for simplicity purposes :eek:

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>
    	Test PhotoView
    </title>
    </head>
    <body style="height:100%; padding: 0; margin: 0;">
            <div style="overflow:auto; height:50%; top:0; position:absolute; width: 50%; ">
                <img id="Image1" src="test1.jpg" alt="Script1" style="border-width:0px;" />
            </div>
            <div style="overflow:auto; height:50%; top:0; left: 50%; position:absolute; width: 50%;">
                <img id="Image2" src="test2.jpg" alt="Script2" style="border-width:0px;" />
            </div>
            <div style="overflow:auto; height:50%; top:50%; position:absolute; width: 50%;">
                <img id="Image3" src="test3.jpg" alt="Script3" style="border-width:0px;" />
            </div>
            <div style="overflow:auto; height:50%; top:50%; left: 50%; position:absolute; width: 50%;">
                <img id="Image4" src="test4.jpg" alt="Script4" style="border-width:0px;" />
            </div>
    </body>
    </html>
    
     

Share This Page