Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

div's height expands when using percent units

floyde

floyde

macrumors 6502a
Original poster
Apr 7, 2005
808
1
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
 
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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back