View Full Version : div's height expands when using percent units
floyde
Mar 22, 2006, 07:59 PM
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
mnkeybsness
Mar 23, 2006, 01:22 PM
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, 01:30 PM
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, 01:53 PM
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 :o
<!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>
vBulletin® v3.6.10, Copyright ©2000-2009, Jelsoft Enterprises Ltd.