Two inline-block divs positioned next to each other, with the final one incorrectly aligned in the middle

I'm trying to vertically align responsive divs side by side in pairs without using floats and flex. However, I have encountered an issue where the last div is not aligning properly. Instead of being on the left like the others, it appears in the middle. Any ideas on how to fix this?

The current layout looks like this:

div1  div2
div3  div4  
   div5   

Instead of:

div1 div2
div3 div4
div5

Here's the CSS and HTML code I'm using:

div-container{
  margin: 0 auto;
  width: 95%;
}
    
div{
  display: inline-block;
  width: 48%;
  margin-right: 4%;
  margin-bottom: 4%;
}
    
div:nth-child(2n+2) {
  margin-right: 0;
}


  
       
<div class="div-container"><div>
     <div class="image-box">
       <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                   <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                   <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
     <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                    <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    </div>

javascriptjquerycsshtml

Answer №1

Consider including text-align: left; in your container-div

Answer №2

Here is a helpful snippet for achieving the desired layout: simply add text-align:center to the parent div and the last div will align to the left.

.all-box {
width:400px;
margin:0 auto;
text-align:left;
}
.box {
width:49%;
display:inline-block;
height:100px;
background:#666;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="all-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</body>
</html>

Answer №3

Consider eliminating the following CSS properties from the div tag:

margin-right: 4%;
margin-bottom: 4%;

and see if it improves the alignment.

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

Remove three characters from every identification number and insert two new characters

So I've been working on a script to grab the IDs from all labels on a page, with the intention of removing three letters and replacing them with two other letters. This is what I have so far: (function ($) { $(document).ready(function() { $(&a ...

jqueryreplaceeach

Verify if the element in the array is set to true

Using a simple boolean in a condition is straightforward : var running = true; if(running) {/*do something*/} But what about using a boolean array? Can it be done like this: var running = [false,false,true,false]; if(running[]){/*do something*/} Curren ...

javascriptjqueryarraysboolean

What is the impact of sending a JavaScript request to a Rails method every 15 seconds in terms of efficiency?

I have a method that scans for notifications and initiates a js.erb in response. Here is the JavaScript code triggering this method: setInterval(function () { $.ajax({ url: "http://localhost:3000/checkNotification", type: "GET" }); }, 15000); ...

javascriptjqueryruby-on-rails

How can I access an object in ng-model in AngularJS?

When a user selects a client from the list, I want to display the client's ID and country. Currently, I can display the entire selected object but not the specific client details. <label class="control-label red">Client</label> ...

javascriptphpangularjslaravel

PHP object representing a datetime in JSON format

How can I convert a JSON datetime object sent to JavaScript into a JavaScript datetime object? The PHP return is: "date": { "lastErrors": { "warning_count":0, "warnings":[], "error_count":0, "errors":[] }, "timezone": { "nam ...

javascriptphpjson

Preserve the data integrity through two consecutive jsp pages

My task involves extracting a value from a table: <script type="text/javascript"> var activeRequest; $(document).ready(function(){ $(".i_search").on("click", function(event){ event.preventDefault(); acti ...

javascriptjqueryajaxjsp

Tips for creating a seamless Bootstrap collapse effect

I have noticed a slight flicker in the content collapse when using this code. Is there a way to make it collapse more smoothly? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script ...

javascripthtmlcsstwitter-bootstrap

Enhance your threejs project by incorporating post-processing effects alongside a captivating static background image

Stumbling upon an impressive code snippet by Andrew Berg, I discovered a method to create volumetric lights inside threejs. The mesmerizing effect can be witnessed here: https://codepen.io/abberg/pen/pbWkjg?editors=0010. This technique involves post-proces ...

javascriptthree.js

What is the method to retrieve the control name of a dynamic Angular field?

I am currently working on a feature where I need to dynamically add new controls to my formBuilder. /* templatesTypes = ["string1", "string2", "string3","string4"] */ /* templates = [{templateType: "string1", ...}, {templateType: "string2"}, ...]*/ this. ...

javascriptangulartypescriptangular-formbuilder

Utilizing Redux in my ASP.NET MVC application with the help of RequireJS and TypeScript (Issue: Encountering a script error for "redux" dependency)

I'm currently working on integrating the Redux state library with my ASP.NET MVC application using TypeScript and RequireJS. For this simple application, I have set up a new ASP.NET MVC Project and stripped it down to only include the necessary node ...

javascriptasp.net-mvctypescriptrequirejs

Flickering transition effect with CSS transformY on window scroll

I'm currently working on a react project where I want the navigation to hide when scrolling down and show when scrolling up. To achieve this, I've implemented a window event listener for scroll which triggers my toggleNavigation function, along w ...

javascriptreactjscss-transitionscss-transforms

Unable to define the color of icons path using CSS in Vue 3

When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...

cssvue.jssvgtailwind-css

Generate a new Div dynamically, positioned higher than the rest

Once a second, this script will utilize AJAX to open a new page and display the contents in a dynamically created div on this page. However, the issue is that the new divs are stacking under each other, and I would prefer them to be added at the top instea ...

phpjavascriptajaxhtml

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Currently, I am facing a challenge with accessing a function that is defined in the table.js file from within my index.html. Here is a snippet of the code: table.js let table; function set_table(table) { this.table = table; consol ...

javascripthtmljquerynpmwebpack

Automatically scraping Facebook API data with PHP

I'm completely new to php and I am looking for a way to automatically scrape metadata. I came across a solution, but I am unsure how to implement it in php. POST /?id={object-instance-id or object-url}&scrape=true Can anyone provide a sample php ...

phphtmlfacebook-graph-api

Creating nested routes in react-router is a useful technique for managing complex applications. By

I have a parent container with nested routes: function Home() { render ( <Router> <Switch> <Route exact path="/website" component={Website} /> <Route path="/dashboard" compo ...

javascriptreactjsreact-router

Issues encountered when trying to implement helperText in mui date picker

Can someone assist with this issue? The helper text is not displaying as expected in the following code snippet: <div className={classes.container}> <LocalizationProvider dateAdapter={AdapterDateFns}> <Des ...

javascriptreactjsmaterial-uifrontend

Arrange a string with specified delimiters based on the json field

Here is an example located at This JavaScript code reads and displays the data: let dataString = "Worl, Seymour|Jones, Jim|Smith, Paul|Jolly, Roger|"; let splitString = dataString.split("|"); for (let i = 0; i < splitString.length;) { $("#I" + i) ...

jqueryjsonsortingtoken

"Reduce the height and adjust the row spacing of the Vuetify form for a more

I'm currently working on creating a form using vuetify that closely resembles the one shown in this image: https://i.sstatic.net/4h6YM.png After experimenting with vuetify grid and columns, I've managed to achieve something similar to this: http ...

cssvue.jsvuetify.js

Running javascript within a python environment commonly leads to the occurrence of a KeyError

Struggling to implement a Python Selenium script? I need to verify if a specific element exists within a designated parent and return true if it does. Check out the code snippet below: for box in range(len(browser.find_elements(*selector))): res ...

javascriptpythonstringseleniumformatting