CODEWITHSUNDEEP
htmlcsscss-float
InvalidSyntax
InvalidSyntax

Reputation: 9509

Why is float:left not filling in the gaps

I am trying to create a grid which can have two different sizes boxes. The last two images on the bottom row should appear on the far left but they appear after the big image on the previous row.

enter image description here

How can I get the last two items to start from the left to fill all the space?

HTML

<div class="portfolio">
<ul id="grid">
   <li class="big"><a href="newgrid.html"><img src="http://asn.aerosoft.com/wp-content/uploads/2013/02/blue_sky_scenery_shelter_cove-32699_200x200.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li class="big"><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
   <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li>
</ul>
</div>

CSS

.portfolio {
  padding: 20px;
  margin: 20px auto 0;
  width: 840px;

  border: 1px solid blue;
  }

ul#grid {
  list-style: none;
  margin: 20px auto 0;
  width: 840px;  
  /*border: 1px solid red;*/
  }

#grid li {
  float: left;
  margin-right: 1px;
  width: 100px;
  height: 100px;
  } 


#grid li a:hover img {
  opacity:0.3;  filter:alpha(opacity=30);
  }

#grid li img {
  background-color: white;
  border: 1px solid #58595b;
  width: 100%;
  height: 100%;
  }

#grid li.big {
  width: 201px;
  height: 201px;
}

#grid li.big img {
    width: 201px;
    height: 200px;
}

#grid li a {
  display: block;
  }

Upvotes: 0

Views: 201

Answers (2)

Sanchit
Sanchit

Reputation: 2260

Optimally arranging boxes in a container is an NP-Complete problem and float:left isn't going to solve it for you.

If you just want to greedily make sure that the left of the page is filled then you will have to heavily use absolute positioning and javascript in order to solve this problem.

This guy here (http://codeincomplete.com/posts/2011/5/7/bin_packing/) seems to have written some javascript code in order to pack images for the purposes of generating CSS sprites. You could probably modify his code, add some padding to the images and then use it for your own purposes.

You could also probably force the number of columns on your page and pack things in there acordingly based on their height like pinterest and ebay and other such sites

Upvotes: 1

achudars
achudars

Reputation: 1506

Suggestion - have four columns. Then populate each column with elements as you please. Here's a jsFiddle that roughly demonstrates the concept.

HTML:

...
<div class="column">
   <li class="big"><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
   <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
   <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li>
</div>
...

CSS:

.column {
    border: 2px solid black;
    height: 600px;
    background: lime;
    width: 202px;
    display: inline-block;
}

Upvotes: 0

Related Questions