Link to home
Start Free TrialLog in
Avatar of mtnr
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>
ASKER CERTIFIED SOLUTION
Avatar of VirusMinus
VirusMinus
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
to clarify.. i mean no css solution to apply to dynamic content.

if it was a static page and the images were fixed, you could use absolute positioning.