div's height expands when using percent units

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

  1. floyde macrumors 6502a


    Apr 7, 2005
    Monterrey, México
    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


    Jun 25, 2001
    Moneyapolis, Minnesota
    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


    Apr 5, 2004
    Huntsville, AL
    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


    Apr 7, 2005
    Monterrey, México
    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:

    <!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" >
    	Test PhotoView
    <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 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 style="overflow:auto; height:50%; top:50%; position:absolute; width: 50%;">
                <img id="Image3" src="test3.jpg" alt="Script3" style="border-width:0px;" />
            <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;" />

Share This Page