Fluid floating divs on same line in CSS

Question

Let's say I have an image, with text directly below it. I wrap it up in a div and center the contents inside.

Now let's say I have 20 of these, all with the same sized image (ie 65px) but different amounts of text (text can wrap).

What I want to achieve with this is the following:

I would like to display as many as possible on the same line with 10px of left/right margin around each one. Also, they will always center and equally fill the width of the browser window.

Ideally, if the browser width was super small, it would just display one on each line.

Anyone have a CSS solution for this type of scenario?

It is strictly for mobile... no need to worry about IE

Thanks a lot!

Update

Heres some basic code I am working with.. as you can see it does the job if I hardcode 4 per line (width 25% each):

HTML:

<div class="m-parent-navigation-container">
    <div class="m-icon-navigation-container">
        <a class="m-icon-navigation-link"><img><br></a>
    </div>
</div>

CSS:

.m-parent-navigation-container
    {
    margin: 0 10px;
    color: rgb(26, 46, 120);
    font-size: 0.9em;
    overflow: hidden;
    }

.m-icon-navigation-container
    {
    float: left;
    text-align: center;
    width: 25%;
    }

.m-icon-navigation-link
    {
    display: block;
    font-family: OpenSansBold;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    }

Answer 1

Have a look at this: http://jsfiddle.net/3QSVg/

The important parts are the display: inline-block; and text-align: center;

I'm not sure if this is exactly what you're after, but it's a start.

EDIT:

Here is an updated version: http://jsfiddle.net/j78Qw/1/

It's a bit closer to what you want, I think. But it still has some issues.

Answer 2

You can use flex-box for this. The browser support is still lacking, but if you develop mainly for the webkit rendering engine, ie iOS, Android, Chrome on Windows, you can use it.

Look at: http://codepen.io/anon/pen/fHklC

Answer 3

There is no pure CSS solution, I believe.

First, you should float: left the image boxes. Using JS you can get width of the outer container, and divide it by the width of the image box. This will give you a number, how many image boxes can fit. Now you can calculate maximum possible size of the box to fill the whole width of the container. This will allow you to align images to the center.

<ul id="gallery">
    <li><img src="…" /></li>
    <li><img src="…" /></li>
    …
</ul>

var list = $('#gallery');
var items = list.find('li');

var imageWidth = items.width('auto').outerWidth(true);
var nrOfItemsPerRow = Math.min(Math.floor(list.innerWidth() / imageWidth), items.length);
items.css('width', Math.floor(100 / nrOfItemsPerRow) + '%');

Answer 4

inline-block is your friend here.

http://jsfiddle.net/Vmu9R/1/

There are a couple of caveats with inline-block in that it is not supported well in IE7 and earlier but there are work-arounds.

This article covers the work-arounds and is generally a good article on inline-block

not that you are concerned by IE7 but for those who maybe, conditionally include the following

/* For IE 7 */
zoom: 1;
*display: inline;

Answer 5

If I understand correctly, you're looking to line up div s (with whatever content), have the be fluid width, and have them wrap as needed once there isn't enough room on the page?

Flexbox might be able to accomplish this. See this Fiddle .

Some good resources for Flexbox things:

• https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
• http://demo.agektmr.com/flexbox/
• http://the-echoplex.net/flexyboxes/

Can you use it?