div's height expands when using percent units

floyde · Mar 22, 2006

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

mnkeybsness · Mar 23, 2006

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.

ChrisBrightwell · Mar 23, 2006

Without some code to look at, we can't be much help.

Did you try running it through HTML and CSS validators?

floyde · Mar 23, 2006

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

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>

Search

Search

div's height expands when using percent units

floyde

macrumors 6502a

mnkeybsness

macrumors 68030

ChrisBrightwell

macrumors 68020

floyde

macrumors 6502a

Our Staff