Creating a Visual Balance with CSS Image Margins

div#columncontents {
  background: black;
}

img.colimg03 {
  position: relative;
  right: -70px;
}

img.colimg02 {
  position: relative;
  right: -40px;
}
<div id="columncontents">
  <div class="columnimage">
    <img class="colimg01" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg02" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg03" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg04" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg05" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg06" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  </div>
</div>


I have formatted the CSS for each image within the div columncontents container to achieve a desired layout. However, this method may be cumbersome with multiple images. I aim to align 12 pictures in a grid format of 4 on top and 4 on bottom, perfectly fitting within the container. Seeking advice on an alternative approach to easily accomplish this task.

htmlcss

Answer №1

To achieve a responsive layout, you can utilize the power of flexbox. It is inherently designed to adapt to different screen sizes.

UPDATE: A margin has been included for additional spacing.

* {
  box-sizing: border-box;
}

#columncontents {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: blue; /* For visibility only */
}

div {
  width: 23%;
  margin: 1rem 0;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
<div id="columncontents">
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
</div>

Answer №2

the most effective method to achieve this is by utilizing the bootstrap grid system

.img-box{
  border:1px solid #000;
   margin-left:10px;
  margin-top:10px;
}
<div class="container">
  <div class="row>
    <div class="col-sm-4 img-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
    <div class="col-sm-4 img-box">
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
  </div>
</div>

View Live Preview

Trust this solution addresses your issue!

Answer №3

Are you looking to achieve this goal? Just remember, it's important for all your images to have the same dimensions.

.wrapper {
  width: 100%;
  overflow: hidden;
}
.wrapper > img {
  float: left;
  width: 25%;
}
<div class="wrapper">
  <img class="image1" src="link-to-image1.jpg">
  <img class="image2" src="link-to-image2.jpg">
  <img class="image3" src="link-to-image3.jpg">
  <img class="image4" src="link-to-image4.jpg">
</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

Tips on stopping the display of the search input name

I am a beginner and still getting the hang of things. The code below is functioning correctly, but I'm unsure how to hide the search input name from appearing on the page. Please see the image attached below as well. Thank you for your assistance in a ...

javascripthtml

Angular input field for numbers does not display default values

In my stock-status.component.ts file, I have the code snippet below: @Component({ selector: 'app-stock-status', template:` <input type="number" value='0' min='0' required [(ngModel)]='updatedStockValue& ...

htmlangularinputangular-template

Unable to view flash elements in HTML using Django framework

Apologies for any errors in my English, I will do my best to explain clearly. I am new to working with Django and I have a html page with flash content called map.html. I would like to include this page into another page called soporte.html (which extends ...

javascripthtmldjangoflash

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

Pictures are loading fine on a Chrome tab, but are showing a 403 error in the React code

I've been working on a React project that includes images using the img tag. Some of these images are failing to load with a 403 error: https://i.sstatic.net/AmgkF.png Interestingly, these same images load perfectly fine in another tab on Chrome: h ...

javascripthtmlreactjshttp-status-code-403

Having trouble customizing the HTML range input?

I am looking to customize the appearance of a range input slider. Specifically, I want the slider to be green for the lower portion (where the thumb has moved) and grey for the remaining section. I have successfully changed the default styles from blue and ...

javascripthtmlcssangularrange

forward various submit buttons to separate pages

I created a form in HTML with multiple choices, and I want each choice to redirect the user to a different page once clicked. Can anyone advise me on how to achieve this? I am coding in PHP. echo "<form action='home.php' method='po ...

phphtmlforms

What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution. The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second ...

htmlcsscross-browsercss-position

Div containing elements positioned side by side

<div class="card-body" data-bind="if :showParam() || editParameters() "> <form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData"> <div id="input-holder" data-bind ...

htmlcssbootstrap-4

Tapping on content within SPAN elements with Selenium Webdriver in Java

Here is an example of what HTML code might look like: <td id="id26a" class="doclisting-name link" style="width: 319px; min-width: 319px;"> <span id="id26b" title="Document"> <span class="ie-fallback-marker"> sample text </span> ...

javaseleniumhtml

The functionality of the Jquery mobile panel ceases to work properly when navigating between pages within a multi-page

Within a multi-page template setup in a jQuery mobile application, an issue arises after navigating away from the first page using panel navigation. Upon returning to the first page through another form of navigation, the panel appears "hanged." Upon clos ...

javascripthtmljquery-mobilemobile

Count the number of checkboxes in a div

In my current project, I am working on incorporating three div elements with multiple checkboxes in each one. Successfully, I have managed to implement a counter that tracks the number of checkboxes selected within individual divs. However, I now aspire to ...

javascripthtmlangularcounter

What is the best way to format text into 2 lines on both Internet Explorer and Firefox?

I'm trying to wrap the text in two lines. When I use the following code on Google Chrome: overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; white-space: normal; However, this code ...

htmlcssfirefoxinternet-explorer-11

Show the price of the item with a click of a button

There are three buttons where I can select values and input them into the button. Once all three values are selected in the buttons, I would like the product of these values to be displayed in a fourth button. Here is my HTML code: <label>S *</l ...

jqueryhtmlangularjs

Error: JavaScript Framework (JSF) application experiencing issues with jQuery functionality

I am a beginner when it comes to jQuery. In my Netbeans project, I have the jquery-1.7.2.js file where all HTML files are stored. Currently, I am working on creating a JSF 2.0 project. Below is the code snippet I am using: <?xml version='1.0&apo ...

jqueryhtmljsf-2alertnetbeans-7

Tips on maintaining the original text hues that were established using setForeground() when a QTableWidgetItem is picked

Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...

pythoncsspyside2qtablewidgetqtablewidgetitem

Is there anyone who can identify the issues with this form validation?

This is my first time putting together a contact form and I'm encountering some issues. When I click on the submit button, my website doesn't display the PHP page as intended. Additionally, the validation boxes are not showing up when they should ...

javascripthtmlformsvalidationbootstrap-4

How come JSOUP fails to read in UTF-8 format?

I've been struggling to parse utf-8 using jsoup. I've tried everything I know and even searched on Google. My goal is: String tmp_html_content ="Öç"; InputStream is = new ByteArrayInputStream(tmp_html_content.getBytes()); Documen ...

javahtmlutf-8jsoup

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Can we verify on the front end in AngularJS if app.point !=1 and app.comment==null? <td> <input type="number" max="5" min="1" ng-init="app.point=5" data-ng-model="app.point"> </td> < ...

javascriptangularjshtml

Adding an external JavaScript file to an HTML document by importing an array

Having trouble loading an array from an external JS file into my HTML. Snippet from js.js: var temp_max = [4,9,2,5,8,4,2,10]; In the HTML: Note: Be sure to download DateJS and place it in "DATE-JS"!! <!doctype html> <html> ... (HTML c ...

javascripthtmlarrays