[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 695
  • Last Modified:

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:

<style type="text/css">
.outerF {
width: 160pt;
.innerF {
width: 30pt;
margin: 8pt;
float: left;

<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>

  • 2
1 Solution
there is no way to do this which will be consistent and give you a good layout with gaps filled.

a better way would be to make the container divs a fixed height and center the images inside vertically.
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.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now