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

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Challenges between Django and VSCode

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

Directories within directories - HTML base directories & subdirectories

iTextSharp struggles to convert certain HTML elements to PDF format

Difficulties encountered with CSS transitions when using the background

Should PHP be avoided in CSS files?

Testing the local transmission of form data via Javascript: A Step-by-Step guide

Steps for generating a sophisticated shadow effect using CSS

I am having trouble getting Google Maps to load

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

Preventing the copying and pasting of HTML ruby tags

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

Different types of video formats used for html5 video players

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

The height of the input element is greater than the size of the font

Generating a PDF file from HTML div content using a button click

`Can you provide instructions on modifying CSS using JavaScript once the window size reaches a specified threshold?`

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

Is there a way to synchronize the expanded row data with the columns of the main table in Material UI's collapsible table?