The inline-block property can become unstable when dealing with a large number

Question

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle

CSS

#container {
    border: 1px solid blue;
    padding: 2px; 
    display: inline-block;
}

.child {
    width: 100px;
    border: 1px solid black;
    float: left;
    margin: 2px;
}

HTML

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>

</div>

It works perfectly until I have a larger number of children (like 30) and then things start going wrong on jsfiddle

What's causing this white-space issue, and how can I make the container div size down properly?

html css

Answer 1

Answer №1

The extra space was necessary due to the boxes not fitting properly, so I simply increased the width by 10 without adding any additional space. If needed, here is a link to the code: http://jsfiddle.net/AnDrewpa18/t5Nth/

HTML

<body>
<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
</div>

CSS

#container {
    border: 1px solid blue;
    padding: 2px;
    display: inline-block;
}
.child {
    width: 110px;
    border: 1px solid black;
    float: left;
    margin: 2px;
}

Answer 2

The extra space was necessary due to the boxes not fitting properly, so I simply increased the width by 10 without adding any additional space. If needed, here is a link to the code: http://jsfiddle.net/AnDrewpa18/t5Nth/

HTML

<body>
<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
</div>

CSS

#container {
    border: 1px solid blue;
    padding: 2px;
    display: inline-block;
}
.child {
    width: 110px;
    border: 1px solid black;
    float: left;
    margin: 2px;
}

The inline-block property can become unstable when dealing with a large number

Answer №1

Similar questions

The dropdown menu failed to display properly as intended

Adjust CKEditor's height within Vue.js

What is the best way to ensure the hamburger menu stays perfectly centered?

Show a specific item when selecting an option from a dropdown menu

Issue with Jquery functionality on IE9 Release Candidate

Round up all the hyperlinks within a paragraph and organize them neatly into a list

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

Decrease the gap between the <hr> and <div> elements

Is the <a data-method='something' href ... requesting a POST method?

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

What is the best way to create an arrow connecting a parent div to multiple child divs?

Unable to connect List to dropdown in angular

Adding dynamic HTML to the body in AngularJS based on URL alterations

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

preserve functionality when switching between pages

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

What is the best way to position a div as a footer within a larger main div?

determining the user's position within the <s:select> element

Angular 6 - detecting clicks outside of a menu

Aligning MaterialUI Grid items vertically within various Grid containers