Geek Answers Handbook

Fluid width container to hug floats

I have a container (image gallery) whose maximum width is 80%. Inside the image are placed on the left, forming columns and rows. When you shorten / expand the browser window, more or less images fit into each line, and at the end of each line there is usually a “remainder” when there is not enough space to place another full image:

http://jsfiddle.net/vladmalik/DRLXE/1/

I would like the container to expand or contract to hug exactly, however many floats fit into the column (so there is no yellow residue left). Can this be done using CSS?

HTML:

<section> <div></div> <div></div> <div></div> <div></div> <div></div> </section>

CSS

 div { width: 100px; height: 100px; float:left; background: red; } section { margin: 0 auto; max-width: 80%; background:yellow; overflow: hidden; }
+6
source share
2 answers

I think you can do this with the jQuery .length() div , which constantly recounts the required width and height depending on the size of the window. Therefore, if ...

 div { width: 100px; height: 100px; float: left; }

Then...

 $(document).ready(function(){ changeSize(); }); function changeSize(){ var length = $('div').length(); //let say is 12 var windowwidth = $(window).width(); //let say it 1000px, if (length >= 10 && windowwidth >= 600px){ $('section').css('width', '300px'); $('section').css('min-height', '400px'); } else if { //Some more sizing code... } } $(window).resize(function() { changeSize(); });

You will need to set the conditions in the if statements based on your needs, but this method should do this.

0
source

This cannot be done exclusively in CSS (especially if it should be compatible with multiple browsers), the best thing you can do is set the width of the divs as a percentage and then set their css background, for example:

 div { width:25%; height: 100px; float:left; background: transparent url('http://1.bp.blogspot.com/_muMRp22Klwo/SuGeqr4TeII/AAAAAAAAAVY/afpIYqkyPkM/s400/sad-dog.jpg') center center no-repeat; }

http://jsfiddle.net/DRLXE/3/

However, far from perfect.
0
source

More articles:


All Articles