make floating images fill in space with no gaps.

Posted on 2007-07-26
Last Modified: 2013-12-20
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>

Question by:mtnr
    LVL 30

    Accepted 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.
    LVL 30

    Expert Comment

    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

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    Join & Write a Comment

    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now