How Can I Get Floating Imgs To Fill All Space

I have some images width fixed sizes. I want them to fill up like a grid, like this: But instead this happens: How can I make them fill everything? html:

Copy

Relevant CSS:

#product-pics { width: 852px; }
.tile {
    float: left;
    width: 282px;
    height: 282px;
    margin: 0 2px 2px 0;
}
.right { float: right; }
.double-h { height: 566px; }
.double-w { width: 566px; }

Solution 2:

You need to use JavaScript to do this. There is an excellent plugin called Masonry which will produce the layout you want. Masonry uses jQuery, however there is a Vanilla Masonry port that does not.

The problem you're facing is the fact that browsers lay the page out horizontally first, then vertically. Masonry changes this and creates a layout in columns.

This layout can also be produced with CSS3 columns, however browser support isn't great (IE10+, other modern browsers).

Solution 3:

Use CSS Class insted of IMG tag and repeat the image, below the example for the first image,

.tile1 {
background:url('img/dummy/282x282.png') repeat top left;
width:100%; /* based on your area */
height:500px; /* based on the image height*/
}

Also check the different "repeat" option available in CSS.

Share