CSS fluid divs floating on a single line

Question

CSS fluid divs floating on a single line

Imagine having a series of images with text below them, all wrapped in a div and centered. There are 20 of these elements with similar image sizes but varying amounts of text.

The goal is to line up as many as possible on one row, each with 10px margin on the sides. They should be center-aligned and evenly fill the browser window width. If the window is very narrow, they should stack vertically.

If you have a CSS solution for this mobile-specific layout challenge, please share!

Update

Here's the basic HTML and CSS code I've been using:

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

.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;
    }

html css

Answer 1

Answer №1

Check out this helpful resource: http://jsfiddle.net/3QSVg/

Make sure to focus on the display: inline-block; and text-align: center; for key elements.

This may not be the exact solution you need, but it's a good starting point.

UPDATE:

Take a look at the revised version here: http://jsfiddle.net/j78Qw/1/

It's getting closer to your desired outcome, although there are still some issues to address.

Answer 2

Check out this helpful resource: http://jsfiddle.net/3QSVg/

Make sure to focus on the display: inline-block; and text-align: center; for key elements.

This may not be the exact solution you need, but it's a good starting point.

UPDATE:

Take a look at the revised version here: http://jsfiddle.net/j78Qw/1/

It's getting closer to your desired outcome, although there are still some issues to address.

Answer 3

Answer №2

Consider using flexbox to achieve this layout. Although browser support is not yet universal, it works well with webkit engines like iOS, Android, and Chrome on Windows.

Check out an example here: http://codepen.io/anon/pen/fHklC

Answer 4

Consider using flexbox to achieve this layout. Although browser support is not yet universal, it works well with webkit engines like iOS, Android, and Chrome on Windows.

Check out an example here: http://codepen.io/anon/pen/fHklC

Answer 5

Answer №3

It seems that a pure CSS solution may not be possible.

To achieve the desired layout, start by floating the image boxes to the left using float: left. With the help of JS, you can determine the width of the outer container and divide it by the width of the image box to calculate how many image boxes can fit in a row. This calculation will give you the maximum possible size for each box to fill the entire width of the container, enabling you to align the 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 6

It seems that a pure CSS solution may not be possible.

To achieve the desired layout, start by floating the image boxes to the left using float: left. With the help of JS, you can determine the width of the outer container and divide it by the width of the image box to calculate how many image boxes can fit in a row. This calculation will give you the maximum possible size for each box to fill the entire width of the container, enabling you to align the 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 7

Answer №4

It seems like you're interested in aligning fluid-width div elements and having them wrap when the page runs out of space.

You might want to consider using Flexbox for this purpose. Take a look at this Fiddle to see how it works.

Here are some helpful resources on Flexbox:

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

Check if Flexbox is supported by the browsers you are targeting.

Answer 8

It seems like you're interested in aligning fluid-width div elements and having them wrap when the page runs out of space.

You might want to consider using Flexbox for this purpose. Take a look at this Fiddle to see how it works.

Here are some helpful resources on Flexbox:

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

Check if Flexbox is supported by the browsers you are targeting.

Answer 9

Answer №5

Utilize inline-block for optimal design

View an example here

While inline-block has its advantages, it may not be fully supported in older versions of Internet Explorer such as I.E.7. However, there are ways to work around this limitation.

This insightful article delves into the workarounds for using inline-block effectively.

If compatibility with I.E.7 is a concern, consider including the following:

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

Answer 10

Utilize inline-block for optimal design

View an example here

While inline-block has its advantages, it may not be fully supported in older versions of Internet Explorer such as I.E.7. However, there are ways to work around this limitation.

This insightful article delves into the workarounds for using inline-block effectively.

If compatibility with I.E.7 is a concern, consider including the following:

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

CSS fluid divs floating on a single line

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Manipulate the color of the parent text using a button nested within

Tips for shifting a div to the left with AngularJS

Vertically align the text

establishing irregular edges for the div container

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

Designing versatile buttons with HTML

Place text directly below the images for proper alignment

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Adding a unique field to a specifically tailored post type

Implementing a click event to convert text to input in Angular 5

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected

Adjusting the style attributes for Material-UI Icons

Tips for resizing images to fit different screen sizes on your website

Conceal the scrollbar and enable horizontal swiping using CSS

The placeholder string is being accepted as the input value for the number

Storing HTML elements in a database using jQuery's html() method

Difficulty positioning CSS, aligning flex-box grid with floating text

Ways to declare a function within the events onMouseOver and onMouseOut

Having difficulty in setting a Cookie with php