mtnr
asked on
make floating images fill in space with no gaps.
Problem: In divs full of images, there are gaps when the images are different heights.
For example, in the html below, the tall.gif ends up at the end of the 1st row of gifs. So it creates a look like this, with a big gap of space underneath the smalls gifs in the 1st row:
[small1] [small2] [tall
more tall
more tall]
[small3] [small4]
How can I get small3 and small4 to fill in that gap, instead of being positioned *below* the bottom edge of tall.gif?
I'm hoping there is a css solution, as the content is generated dynamically, and there are many divs full of many varying height images.
Thank you.
Start html:
<html>
<head>
<style type="text/css">
.outerF {
width: 160pt;
}
.innerF {
width: 30pt;
margin: 8pt;
float: left;
}
</style>
</head>
<body>
<div class="outerF">
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="tall.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
</div>
</body>
</html>
For example, in the html below, the tall.gif ends up at the end of the 1st row of gifs. So it creates a look like this, with a big gap of space underneath the smalls gifs in the 1st row:
[small1] [small2] [tall
more tall
more tall]
[small3] [small4]
How can I get small3 and small4 to fill in that gap, instead of being positioned *below* the bottom edge of tall.gif?
I'm hoping there is a css solution, as the content is generated dynamically, and there are many divs full of many varying height images.
Thank you.
Start html:
<html>
<head>
<style type="text/css">
.outerF {
width: 160pt;
}
.innerF {
width: 30pt;
margin: 8pt;
float: left;
}
</style>
</head>
<body>
<div class="outerF">
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="tall.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
<div class="innerF"><img src="small.gif" /></div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if it was a static page and the images were fixed, you could use absolute positioning.