How to center align HTML Elements and insert new items from the left side

Within a parent div, there are multiple smaller divs acting as large icon-like buttons. I am looking for a way to have these divs centered with equal margins if they fill up a row, but filled in from the left side if a row is not complete. Can this layout be achieved using CSS so that resizing the window maintains the centering and adjusts the number of columns accordingly? The widths of all child divs are known.

Attached is a rough image illustrating the desired behavior:

htmlcss

Answer №1

After some brainstorming, I came up with a unique solution that not only ensures equal margins but also aligns divs to the left in the last row. The downside is that it involves hidden elements, making the container taller than the visible content it holds.

This method does introduce additional markup to your code, and if there was an alternative approach, I would have opted for that. Apologies for any inconvenience.

You can view the implementation on JSFiddle: https://jsfiddle.net/88qadmo3/2/

#container > div {
    margin: 10px;
    width: 100px;
    height: 100px;
}
.floatleft {
    background-color: red;
}

.invis {
    visibility: hidden;
}

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #DDDDDD;
}

.clearfix {
    clear: both;
}
<div id="outer">
<div id="container">
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
</div>
</div>

Answer №2

To achieve this effect, you can enclose each child element within a container element and utilize CSS media queries to adjust the size of these containers dynamically. Simply set the width of the containers using percentage values to define the desired column sizes.

For example, when you resize the display to less than 400px, observe how the layout transitions from 6 columns to 3 (for optimal viewing, run the code snippet in full-page mode).

.parent {
  border: 2px solid red;
}
.child {
  width: 100px;
  display: block;
  margin: 0 auto;
  border: 1px solid black;
}
.wrapper {
  display: inline-block;
  text-align: center;
  float: left;
  width: 16.66%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
@media (max-width: 800px) {
  .wrapper {
    width: 20%;
  }
}
@media (max-width: 600px) {
  .wrapper {
    width: 25%;
  }
}
@media (max-width: 400px) {
  .wrapper {
    width: 33.33%;
  }
}
<div class="parent">
  <div class="wrapper">
    <div class="child">1</div>
  </div>
  <div class="wrapper">
    <div class="child">2</div>
  </div>
  <div class="wrapper">
    <div class="child">3</div>
  </div>
  <div class="wrapper">
    <div class="child">4</div>
  </div>
  <div class="wrapper">
    <div class="child">5</div>
  </div>
  <div class="wrapper">
    <div class="child">6</div>
  </div>
  <div class="clear"></div>
</div>

Answer №3

To achieve the desired layout, you can simply apply the float left property to the items along with setting their width as shown in this example:

<div class="container">
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
    <div class="item">Dogs</div>
</div>

.container {
    overflow: auto;
}

.item {
    width: 50px;
    float: left;
    margin: 0 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to prevent alternate scrolling text from extending beyond the boundaries of its parent element?

I'm attempting to create a scrolling effect where the text moves back and forth within its container. The current issue I'm facing is that the text goes beyond the width of the parent container before scrolling back. I want the text to smoothly s ...

htmlcss

The Owl carousel is experiencing difficulty loading slides due to issues with autoheight functionality

UPDATE I have identified the issue. It appears that the problem lies with the auto height function of Owl Carousel. If I disable this function, the images load properly. However, I rely on this feature due to the varying sizes of the images. What course o ...

htmlowl-carousel

The alignment of the image in the Bootstrap dropdown menu is disrupted

Hello! Currently, I am utilizing this bootstrap template from . However, I am encountering an issue with the dropdown menu alignment when I try to add an image to it. Is there anyone who can provide some assistance with this problem? The complete code was ...

htmlcsstwitter-bootstrapbootstrap-4

I'm struggling to find a way to turn off the scroll bar

I'm having trouble disabling the scroll bar on my website for specific reasons. Can anyone provide me with some guidance? <iframe src="video" width="960"height="540" frameborder=0 ></iframe> ...

html

Storing JSON data within a fabric.js canvas

Is there a way to import and modify multiple SVG files, then save the JSON data to a database? I attempted to use the following code: canvas.item(0).sourcePath = '/URL/FILE.svg'; JSON.stringify(canvas.toDatalessJSON()); However, this me ...

javascriptjsonhtmlcanvasfabricjs

Having trouble decoding audio data in JavaScript Web Audio?

I'm attempting to utilize the Web Audio API in JavaScript to upload a sound into a buffer and play it. However, I am encountering an issue where it does not work and an error message is displayed: Uncaught TypeError: Failed to set the 'buffer&ap ...

javascripthtmlweb-audio-api

The rounded corners border radius is not displaying when printing

After reviewing a helpful article on the topic from this link, I am still struggling to understand why my border-radius is not showing up when printing. The border-radius properties display correctly in the browser, but fail to print as expected. Here is ...

htmlcss

How can I get my HTML DIVs to automatically move downward instead of upwards?

I'm currently developing a chat script that includes the feature to minimize specific chats, but I've encountered an issue with making the header of the div push down. Despite researching extensively, I haven't been able to find a solution t ...

htmlcsschat

Create a feature that allows users to easily copy text with

Looking to utilize this Bootstrap code for generating an address and adding copy button functionality: <div class="modal fade" id="bitcoinModal" role="dialog"> <div class="modal-dialog modal-lg"> <d ...

htmlcssbootstrap-4bootstrap-modal

Conceal and reveal identities with the power of react hooks

I'm just starting to work with React hooks, In my app, I want all user names to be hidden by default. However, when I click on each user, their name should be displayed. To accomplish this, I am using the show and setShow functions. Although when I tr ...

javascripthtmlcssreactjsredux

Retrieving the country code using Google Maps in conjunction with HTML 5 GeoLocation

I've been working on a project that involves using HTML 5 GeoLocation to retrieve longitude and latitude coordinates, and then utilizing the Google Maps API to obtain the corresponding country code based on those coordinates. However, I seem to be enc ...

htmlgoogle-maps-api-3

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

htmlcss

A guide on applying numeric values to set RGB colors in CSS

I'm new to HTML/CSS and I've noticed that there are different ways to set color codes in CSS, such as using names like yellow or hex codes like #ffff00. I've also learned that each color has a numeric equivalent, for example, yellow is repre ...

htmlcsscolors

JavaScript functions for adding and deleting input values

After exploring various solutions on stackoverflow, I have encountered a multitude of methods to tackle this problem. Unfortunately, none of them seem to be working for me. Here is the code I am currently using: http://jsfiddle.net/tech0925/C9Z8N/5/ Thi ...

javascripthtmlhtml-input

Unable to find the element using Selenium despite attempting different locators such as xpath, name, id, and

Despite attempting to use the name, id, and xpath, I continue to encounter the same issue in Eclipse where it cannot locate the element. WebDriver driver=new FirefoxDriver(); driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); driver.get( ...

javahtmlseleniumxpath

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

What are some methods to manipulate the appearance of text with jquery?

I am having trouble with jQuery and it seems like it's not working properly. Can anyone help me locate the error? My aim is to create a "Read less" button that will show more content when clicked. However, when I click on "Read More", nothing happens. ...

javascripthtmljquerycssbootstrap-4

Element is mistakenly styled with the wrong design

My website has a plethora of elements... And ever since implementing the following CSS code, some elements have been unintentionally inheriting styles that they shouldn't be: different scope, no direct connection to the CSS rules, etc. What am I missi ...

css

Is it achievable to dynamically modify the style URL in an Angular component based on certain conditions?

element: I am working with two different CSS files, one for Arabic layout and one for English layout. I am wondering if it is possible to conditionally change the style URL in the component. Is this feasible? ...

cssangulartypescript

Whenever I attempt to use window.print(), the styling gets completely messed up. I've experimented with both @media screen and @media print, but unfortunately, I

I am working on creating an invoice, the design looks perfect in the browser, but when I try to window.print() the style gets corrupted. I attempted to include @media screen and @media print, but I am still facing the same issue. The invoice form is incorp ...

javascripthtmlcssbootstrap-4