Dynamic content in CSS horizontal alignment

Question

Dynamic content in CSS horizontal alignment

In a parent div with fixed width, I have dynamically created divs that I want to distribute horizontally without knowing the exact number of elements. I tried using the "Using inline-block and justified text" technique from a CSS Tricks page but it did not work as desired when there are more children than will fit in one row.

Upon further inspection, I realized that the spacing issue was not erratic; however, I am looking for a different layout where the second row aligns under the first row instead of distributing evenly.

If anyone has suggestions on alternative approaches to achieve this without relying on JavaScript, I would appreciate any ideas or recommendations.

html css alignment

Answer 1

Answer №1

Failure is not the issue here, as this is simply how floats are designed to behave.

To increase the number of items per line, consider increasing the size of the container or narrowing the boxes.

If you prefer items not to wrap at all, include overflow:auto in your container's CSS to enable a scroll bar.

Answer 2

Failure is not the issue here, as this is simply how floats are designed to behave.

To increase the number of items per line, consider increasing the size of the container or narrowing the boxes.

If you prefer items not to wrap at all, include overflow:auto in your container's CSS to enable a scroll bar.

Answer 3

Answer №2

To ensure that the dic container adjusts its width based on the content inside, you should remove the fixed width of the container and instead add display: inline-block;. Additionally, including overflow: auto; will allow the div to resize according to the number of generated divs within it.

#container {
  display: inline-block;
  background: cornflowerblue;
  overflow: auto;
  height: 200px;
}

Answer 4

To ensure that the dic container adjusts its width based on the content inside, you should remove the fixed width of the container and instead add display: inline-block;. Additionally, including overflow: auto; will allow the div to resize according to the number of generated divs within it.

#container {
  display: inline-block;
  background: cornflowerblue;
  overflow: auto;
  height: 200px;
}

Answer 5

Answer №3

Consider using relative widths instead of fixed widths for the internal div elements....

#testcontainer div {
 width: 19%;
 height: 30px;
 display: inline-block;
 background: red;
float: left;
margin: 2px;

}

Check out the DEMO here

Answer 6

Consider using relative widths instead of fixed widths for the internal div elements....

#testcontainer div {
 width: 19%;
 height: 30px;
 display: inline-block;
 background: red;
float: left;
margin: 2px;

}

Check out the DEMO here

Answer 7

Answer №4

After some consideration, I realized that JavaScript was necessary for my task. I assigned id's to the fourth child element and then utilized CSS to remove the margin from it (although I suspect this could have been achieved with CSS using nth child if IE8 support wasn't required).

Edit: Eventually managed to achieve my desired outcome - http://jsfiddle.net/byronyasgur/kUgBA/14/

Answer 8

After some consideration, I realized that JavaScript was necessary for my task. I assigned id's to the fourth child element and then utilized CSS to remove the margin from it (although I suspect this could have been achieved with CSS using nth child if IE8 support wasn't required).

Edit: Eventually managed to achieve my desired outcome - http://jsfiddle.net/byronyasgur/kUgBA/14/

Dynamic content in CSS horizontal alignment

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

obtain the text content from HTML response in Node.js

Bootstrap's grid width is not aligned properly

Steps for positioning an element to the left and center of a div

The art of layering images: How to stack one image on top of another

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

Is there a way to specifically dictate the order in which flexbox items expand or contract?

implementing a fixed header in HTML

Identifying line breaks caused by browsers or CSS forced line breaks

What is the best way to adjust the size of a button using CSS within a ReactJS

Could someone kindly clarify the workings of this jQuery script for me?

The box inside a MUI TextField input is consistently visible

What is the best way to exclude an external HTML file from being displayed on the home page?

Leveraging IPFS to host a CSS stylesheet

The design breaks occur exclusively in the Android default browser

Sending a form without the need to reload the page

Issue with submitting a form within a React modal - lack of triggering events

What is the reason behind receiving email alerts whenever visitors access my website?

Conquering Bootstrap 3's Image Gallery Customizations

Trouble with displaying HTML content on BrowserField in a BlackBerry device