Aligning a dynamic amount of divs within a container

Question

Aligning a dynamic amount of divs within a container

Within my Bootstrap container, I have 4 divs that are dynamically rendered and centered on the page. However, there are instances where only 3 divs are rendered, causing the remaining content within the container to float left due to the float tag in the CSS. How can I ensure that these 3 paragraphs remain centered instead of floating left?

<div class="expertise_section text-center">
<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>

...

The provided CSS is as follows:

@charset "utf-8";

.expertise_section {
    padding: 85px 0;
}
.expertise_section h2 {
    font-weight:500;
    margin-top:7px;
}
.expertise_div {  
  float: left;
    width: 24.2%;
    margin-right:1.05%;
}

...

You can view a working example on jsfiddle here.

html css twitter-bootstrap-3

Answer 1

Answer №1

Include the following CSS code:

.container {
    text-align: center;
}

Remove the float: left; property from all elements. Instead, set the display property of divs to inline-block for .expertise_div - this will ensure that they are always centered as inline elements within the container. Additionally, refine the margins of the elements based on different viewport sizes to accommodate varying numbers of elements. Consider using Flex Box Layout as an alternative to simplify handling margins and edge cases.

@charset "utf-8";
.container {
   text-align: center;
}
.expertise_section {
    padding: 85px 0;
}
.expertise_section h2 {
    font-weight:500;
    margin-top:7px;
}
.expertise_div {  
    display: inline-block;
    width: 24.2%;
    margin-right:1.05%;
}
.expertise_div:nth-child(4n+4) {
    margin-right:0px;
}
.expertise_div p {
    font-family: 'Open Sans', sans-serif;
    color: #6c6c6c;
    font-weight: 300;
}
.expertise_content {
    border-bottom: 2px solid #45acba;
    border-top: 2px solid #45acba;
    margin: 18px 0;
    padding: 26px 0;
}
.expertise_content p:last-child {
    margin-bottom:2px;
}
.expertise_div a {
  color: #3a9cab;
  font-size: 14px;
  font-weight: 500;
}
.expertise_section_inner {
    margin-top:36px;
}
.green_div .expertise_content {
    border-color:#8ebb29;
}
.green_div a {
    color:#8ebb29;
}
.maroon_div .expertise_content {
    border-color:#81515d;
}
.maroon_div a {
    color:#81515d;
}
.orange_div .expertise_content {
    border-color:#d86435;
}
.orange_div a {
    color:#d86435;
}
.show_1023 {
    display:none;
}

@media only screen and (max-width: 1199px) {
    .container {
        padding:0px 35px !important;
    }
}
@media only screen and (max-width: 1023px) {
    .expertise_div {
        margin-right: 3.2%;
        width: 48%;
        margin-bottom:53px;
    }
    .expertise_div:nth-child(2n+2) {
        margin-right: 0;
    }
    .expertise_section {
        padding: 85px 0 30px;
    }
    .expertise_section_inner {
        padding: 0 101px;
    }
    header {
        padding: 20px 15px;
    }
}

@media only screen and (max-width: 951px) {
  .container {
        padding: 0 30px !important;
    text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        padding: 0 30px !important;
    ...

<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>

<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->
<div class="expertise_div blue_div" >
<div class="expertise_content">
<p>Paragraph 1...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div green_div" >
<div class="expertise_content">
<p>Paragraph 2...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div maroon_div">
<div class="expertise_content">
<p>Paragraph 3...</p>
</div>
...

Answer 2

Include the following CSS code:

.container {
    text-align: center;
}

Remove the float: left; property from all elements. Instead, set the display property of divs to inline-block for .expertise_div - this will ensure that they are always centered as inline elements within the container. Additionally, refine the margins of the elements based on different viewport sizes to accommodate varying numbers of elements. Consider using Flex Box Layout as an alternative to simplify handling margins and edge cases.

@charset "utf-8";
.container {
   text-align: center;
}
.expertise_section {
    padding: 85px 0;
}
.expertise_section h2 {
    font-weight:500;
    margin-top:7px;
}
.expertise_div {  
    display: inline-block;
    width: 24.2%;
    margin-right:1.05%;
}
.expertise_div:nth-child(4n+4) {
    margin-right:0px;
}
.expertise_div p {
    font-family: 'Open Sans', sans-serif;
    color: #6c6c6c;
    font-weight: 300;
}
.expertise_content {
    border-bottom: 2px solid #45acba;
    border-top: 2px solid #45acba;
    margin: 18px 0;
    padding: 26px 0;
}
.expertise_content p:last-child {
    margin-bottom:2px;
}
.expertise_div a {
  color: #3a9cab;
  font-size: 14px;
  font-weight: 500;
}
.expertise_section_inner {
    margin-top:36px;
}
.green_div .expertise_content {
    border-color:#8ebb29;
}
.green_div a {
    color:#8ebb29;
}
.maroon_div .expertise_content {
    border-color:#81515d;
}
.maroon_div a {
    color:#81515d;
}
.orange_div .expertise_content {
    border-color:#d86435;
}
.orange_div a {
    color:#d86435;
}
.show_1023 {
    display:none;
}

@media only screen and (max-width: 1199px) {
    .container {
        padding:0px 35px !important;
    }
}
@media only screen and (max-width: 1023px) {
    .expertise_div {
        margin-right: 3.2%;
        width: 48%;
        margin-bottom:53px;
    }
    .expertise_div:nth-child(2n+2) {
        margin-right: 0;
    }
    .expertise_section {
        padding: 85px 0 30px;
    }
    .expertise_section_inner {
        padding: 0 101px;
    }
    header {
        padding: 20px 15px;
    }
}

@media only screen and (max-width: 951px) {
  .container {
        padding: 0 30px !important;
    text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        padding: 0 30px !important;
    ...

<div class="row">
<div class="container">
<h2>Centered Headline</h2>
<div class="expertise_section_inner row">
</div>

<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->
<div class="expertise_div blue_div" >
<div class="expertise_content">
<p>Paragraph 1...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div green_div" >
<div class="expertise_content">
<p>Paragraph 2...</p>
</div>
<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div maroon_div">
<div class="expertise_content">
<p>Paragraph 3...</p>
</div>
...

Answer 3

Answer №2

If you're struggling to center elements with the float: left property, there is a workaround.

You can change the display of your elements to inline-block and apply text-align: center to their wrapper.

Check out this example:

HTML:

<div class="wrapper">
  <div class="boxes">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
</div>

CSS:

.wrapper{
  width: 600px;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}

.boxes{
  width: 100%;
}

.box{
  font-size: 0;
  width: 250px;
  height: 150px;
  background: #fff;
  border: 1px solid #eee;
  display: inline-block;
}

See Demo Here

Answer 4

If you're struggling to center elements with the float: left property, there is a workaround.

You can change the display of your elements to inline-block and apply text-align: center to their wrapper.

Check out this example:

HTML:

<div class="wrapper">
  <div class="boxes">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
</div>

CSS:

.wrapper{
  width: 600px;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}

.boxes{
  width: 100%;
}

.box{
  font-size: 0;
  width: 250px;
  height: 150px;
  background: #fff;
  border: 1px solid #eee;
  display: inline-block;
}

See Demo Here

Aligning a dynamic amount of divs within a container

Answer №1

Answer №2

Similar questions

Contrasting the distinctions between a pair of CSS class declarations

Switch the alignment of Bootstrap checkboxes from vertical to horizontal

tips on adjusting margins or paddings in option select

Can menus in Vue.js be customized differently for various "pages"?

React Error: Attempting to access the 'style' property of an undefined object

Trouble Integrating JQuery UI DatePicker into Bootstrap Card

Sending a POST request in jQuery to receive a JSONP response

Utilizing PHP for Substituting URLs within HTML

Customizing Material UI Popover CSS classes within a Select component in a React application

The "html" element fails to achieve a full height when applying a 100% height setting

Having trouble loading static CSS files in Django

Implement the CSS display flex property for more flexible layouts

The Mat-Table does not display any content despite the fact that the data is being recorded in the console

Troubleshooting: Issue with fixed positioning in React (Next.js) causing problems with modal window functionality

What is the reason behind the addition of escape characters to the hidden input value?

CSS for Page Header with Scroll-Over Content

Navigate within the div by scrolling in increments of 100%

What could possibly be the reason behind jQuery's inability to function properly with HTML content that was dynamically added to the page through an Ajax

Adjust the size of the text within the div element as needed

What does the term "SPCLICK" signify within an email template?