What is the best method for arranging three DIV elements with a width of 33.333% on a single line, while also including a 10px margin on the right side of

When I apply a margin-right of 10px to the first and second child elements, and 0px to the third child element, the third child jumps to a new line.

I can see that the double 10px margin-right is the issue here, but I'm not sure how to fix it.

.albums-container {
    font-size: 0px;
    margin-top: 10px;
}
.albums-container-element {
    display: inline-block;
    margin: 0 10px 10px 0;
    width: 33.33333%;
}
.albums-container-element:nth-child(3n+3) {
    margin-right: 0;
}
.centeredImage {  
    width: 100%;
    height: 100%;
}
<div class="albums-container">

    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
</div>

htmlcss

Answer №1

Consider these two approaches:

Option 1: Take advantage of the calc() function to perform mathematical operations within CSS. To achieve your desired layout, utilize calc(33.333% - 6.666px) for width and apply margin-right: 10px exclusively to the first two elements.

.albums-container {
  font-size: 0px;
  margin-top: 10px;
}

.albums-container-element {
  display: inline-block;
  width: calc(33.333% - 6.666px);
  margin-right: 10px;
}

.albums-container-element:last-of-type {
  margin-right: 0;
}

.centeredImage {
  width: 100%;
  height: 100%;
}
<div class="albums-container">

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-1.jpg'>
  </div>

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-2.jpg'>
  </div>

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-3.jpg'>
  </div>

</div>

Option 2: Alternatively, you can employ the CSS Grid technique by defining the following rules solely on the container (no rules required for the children):

display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 10px;

Here's an example implementation:

.albums-container {
  font-size: 0px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 10px;
}

.centeredImage {
  width: 100%;
  height: 100%;
}
<div class="albums-container">

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-1.jpg'>
  </div>

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-2.jpg'>
  </div>

  <div class="albums-container-element">
    <img class='centeredImage' src='image-url-here-3.jpg'>
  </div>

</div>

Answer №2

Utilize flexbox:

.albums-container {
    font-size: 0px;
    margin-top: 10px;
    
    display:flex;
    
}

.albums-container-element:nth-child(2n) {
    margin: 0 10px;
}
.centeredImage {  
    width: 100%;
    height: 100%;
}
<div class="albums-container">

    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
    <div class="albums-container-element">
        <img class='centeredImage' src='https://www.thesprucepets.com/thmb/4j55UCCc_TyTHtgwflSG8TeGpBU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'>
    </div>
    
</div>

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

Enable the entire button to be clickable without the need for JavaScript by utilizing a Bootstrap 5 button

Is there a way to make a button redirect when clicking anywhere on it, not just the text inside? Here is the button code utilizing Bootstrap 5: <button class="btn btn-rounded btn-primary" type="button">Placeholder Text</button& ...

javascripthtmlbootstrap-5

Maintaining nth-child(odd) following filtering using jQuery

I am using a jQuery script to filter a table with multiple entries on this site. The filtering works well, but the issue arises when it comes to maintaining the correct tr:nth-child(odd) color that I have specified in my CSS. After filtering, the original ...

jqueryhtmlcss

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

javascripthtmlcssbootstrap-4

Create a custom input field with a dot masking feature

My challenge involves a specific input field setup: <input type="text" placeholder="........."> I want the dots in the placeholder to be replaced with letters as the user enters text. For example, if the user types "Hi", the placeholder should upda ...

javascriptjqueryhtml

Dismissal feature malfunctioning in Materialize CSS

I am having trouble closing the modal when the user clicks outside of it. This issue is occurring in my first project with Materialize, and I can't figure out why it's not working. Below is a snippet of the code I have implemented: Within the ...

jqueryhtmlcssmaterialize

Ensuring that a $(function() is consistently executed and does not diminish over time

Simply put, I am troubleshooting my website and in order for it to function properly, I need to include the following code: <script type="text/javascript"> $ (function() { RESPONSIVEUI.responsiveTabs(); }); </script> What I& ...

javascriptjqueryhtmlcss

Is there another way to align the image in the frame without adjusting the size

Is there a method to prevent the HTML <img> tag from squeezing an image when the specified size using the width or height attributes is smaller than the image itself, and instead make it crop the image? ...

html

What are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

javascriptcssintro.js

Pressing "Enter" initiates the submission of the form

My webpage contains a stylish GIF displayed as a button within a div. The script inside the div triggers a click event when the ENTER key is pressed, using $(this).click(). This click action has its own functionality. Everything functions smoothly in Fire ...

javascripthtmljquery

Is there a way to apply an indigo color solely to a div using CSS without affecting the entire body?

Can someone help me achieve a result similar to the image shown https://i.sstatic.net/IY1kI.png I've been working on some code, but I haven't been able to get the exact desired outcome. My goal is to make a div indigo and leave the rest of the b ...

htmlcssbootstrap-4

Showcasing the Characteristics of Products in a Table on Prestashop

Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...

phphtmlcssprestashopprestashop-1.5

What steps can be taken to reduce the size of the cards in ant.design?

Currently, I am using the ant.design Card component to present messages in a chat webapp built with react/redux. However, each card is displaying too much space around the text. Is there a way to adjust the card so that it wraps the text more closely? htt ...

cssreactjsantd

Retrieve a property from a designated element within the DOM

Is there a way to specifically extract the src attribute of the second image in an HTML file using PHP DOM parser? foreach($html->find('img[src]') as $element) $src = $element->getAttribute('src'); echo $src; I s ...

phphtmlparsing

Are the CSS properties from the parent template automatically applied to the extended child template in Django?

While working on a Django site, I encountered an issue with applying CSS properties to an extended template file. The CSS file was imported in the parent template but the changes were not reflecting in the child template. Here is the snippet of my code: ...

pythonhtmlcssdjangodjango-templates

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

cssangulartypescriptless

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

htmlangularbuttonaudio

The difference in pixels for absolute positioning fluctuates by 1

I want to create a unique design for my website where there is a single fixed background at the top center. I also have some specific elements that, when hovered over, should show a different background that aligns perfectly with the original one. The fun ...

htmlcsscss-position

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

javascripthtml

How can I make a div's height match that of another div?

I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure: div.Pantalla { background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg"); background-size ...

htmlcssangular

Utilizing an image source for the Navbar logo

My Bootstrap v4.5.0 navbar is giving me trouble. I am trying to use a logo as the navbar brand, treating it like HTML text. However, I can't seem to replicate it successfully. Despite having other items in my navbar besides just the brand, the image i ...

cssimagebootstrap-4navbar