Arranging two divs side by side while considering a responsive theme

My struggle with aligning divs side by side continues. After searching through online forums for hours, I have yet to find a solution.

The goal is to create a collage using six images. However, currently all the images stack vertically on the left side one after another. These 6 images are set as backgrounds for individual divs within the "Collage" div. I attempted to use the float property on one of these relative divs, but it just vanished.

Usually, I would manually adjust everything using pixels, but this time I want a responsive layout.

How can I make the images appear next to each other responsively?

#collage-container {
  max-width: 97%;
  padding-right: 1%;
  padding-left: 5%;
  position: relative;
  padding-bottom: 15%;
  height: 0;
}
#collagecont2 {
  position: relative;
  max-width: 47%;
  min-height: 70em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont3 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont4 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont5 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont6 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont1 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.large:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  color: #00FF00;
  font-family: arial;
  font-size: 20pt;
  bottom: 1%;
}
}
<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

htmlcsslayoutalignment

Answer №1

Show different sized images side by side elegantly

If you want to showcase various images next to each other seamlessly, utilize CSS columns and display:inline-block for the children elements. It's crucial to apply font-size: 0 on the parent container and then specify the desired font size for the children to eliminate any unwanted white-space between the images.

#collage-container {
  font-size: 0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}
[id^="collagecont"] {
  font-size: 20pt;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

Preserve the aspect ratio of divs

To maintain the aspect ratio of the images within the div containers, apply the css padding trick. Since your images are of varying sizes, adjust the padding-bottom value for each container accordingly.

[id^="collagecont"] {
  background-size: cover;
  background-repeat: no-repeat;
}
#collagecont1 {
  padding-bottom: 46.5%;
  background-image: url('image1.jpg');
}
#collagecont2 {
  padding-bottom: 120%;
  background-image: url('image2.jpg');
}
#collagecont3 {
  padding-bottom: 100%;
  background-image: url('image3.jpg');
}
#collagecont4 {
  padding-bottom: 100%;
  background-image: url('image4.jpg');
}
#collagecont5 {
  padding-bottom: 46.5%;
  background-image: url('image5.jpg');
}
#collagecont6 {
  padding-bottom: 46.5%;
  background-image: url('image6.jpg');
}

Additional code optimizations can be explored in the demo below.

body {
  margin: 0;
}
#collage-container {
  padding: 5%;
  box-sizing: border-box;
  font-size: 0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}
[id^="collagecont"] {
  font-size: 20pt;
  width: 98%;
  display: inline-block;
  vertical-align: top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  color: #00FF00;
  font-family: arial;
  margin: 1%;
}
[id^="collagecont"]:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  width: 100%;
  height: 100%;
}
#collagecont1 {
  padding-bottom: 46.5%;
  background-image: url('image1.jpg');
}
#collagecont2 {
  padding-bottom: 120%;
  background-image: url('image2.jpg');
}
#collagecont3 {
  padding-bottom: 100%;
  background-image: url('image3.jpg');
}
#collagecont4 {
  padding-bottom: 100%;
  background-image: url('image4.jpg');
}
#collagecont5 {
  padding-bottom: 46.5%;
  background-image: url('image5.jpg');
}
#collagecont6 {
  padding-bottom: 46.5%;
  background-image: url('image6.jpg');
}
<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

Answer №2

When using absolute positioning, all elements are positioned relative to their parent element. Responsive CSS frameworks such as bootstrap utilize floating elements instead.

When an element is floated, it will automatically adjust its size to fit the content, unless a specific width is specified. For example, if you want to float 6 items side by side, each item should not exceed 16.66666667% (100%/6) in width. Your CSS class for this would look like:

.large {
    float: left;
    width: 16.6%;
 }

You can see this effect in action in the following fiddle:

https://jsfiddle.net/30j3046d/

Answer №3

One issue is that it's important to define the display of your div elements as inline-block. Another problem arises from the lack of setting a minimum width for these div elements. A possible solution involves utilizing the following CSS:

div[id^=collagecont] {
   display: inline-block;
   min-width: 30%;
}

For better organization, consider assigning a class to your div elements and grouping similar attributes together.

#collage-container {
  max-width: 97%;
  padding-right: 1%;
  padding-left: 5%;
  position: relative;
  padding-bottom: 15%;
}
#collagecont2 {
  position: relative;
  max-width: 47%;
  min-height: 70em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont3 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont4 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont5 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont6 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#collagecont1 {
  position: relative;
  max-width: 45%;
  min-height: 20em;
  background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
div[id^=collagecont] {
  display: inline-block;
  min-width: 30%;
}
.large:hover {
  color: #FF0000;
}
.large {
  position: absolute;
  color: #00FF00;
  font-family: arial;
  font-size: 20pt;
  bottom: 1%;
}
<div id="collage-container">
  <div id="collagecont1">

    <div class="large">
      This is a DIV sample.
    </div>

  </div>

  <div id="collagecont2">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont3">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont4">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont5">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>

  <div id="collagecont6">

    <div class="large">
      This is a DIV sample.
    </div>
  </div>
</div>

Answer №4

Include the code snippet below in your CSS file:

#collagecont1.large, #collagecont2.large, #collagecont2.large, #collagecont4.large, #collagecont5.large, #collagecont6.large{display:inline-block;}

If you place your class alongside your ID and remove the inner div like this

 <div id="collagecont1" class="large">

it might better suit your requirements

Output

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

Is there a way to connect an image to initiate a video in fullscreen mode?

Hey there, I'm currently learning about html5 in school and I have a question. I have created a credits button (image) and what I want is for a video to overlay everything on the website when that button is clicked. I initially considered redirecting ...

htmlvideoonclickfullscreen

Show/hide functionality for 3 input fields based on radio button selection

I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...

javascriptjqueryhtml

Achieving Bottom or Center Alignment for a Div within Another Div Using Bootstrap 5

I've been struggling to position my Title and CTA Button at the bottom (or center) of the main image div. I'm using Bootstrap 5.1 and have tried various d-flex methods without success. You can view my code on jsfiddle. Thank you in advance for a ...

htmlcsstwitter-bootstrapbootstrap-5

Effortlessly Transform HTML into Plain Text Using jQuery

If I wanted to create a feature on my website where users can input text into a text area and then convert it to HTML by clicking a button, how could I achieve that? I'm looking for functionality similar to what Wordpress offers, where users can enter ...

jqueryhtmltextconverters

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

javascriptjqueryhtmlcssline

Is the presence of a 'disabled' attribute on a non-input element enough to render your document invalid in HTML?

Originally intended for <input/> elements, the disabled attribute raises a question when applied to non-input elements. Could this potentially lead to document invalidation? ...

htmlvalidationattributes

Having trouble with Javascript? Your page unexpectedly resets

Hey there, I'm facing a confusing issue. I created a registration page for a project, and every time I enter the information, it should be stored in a cookie. After entering the information for the first time, I saw it in the bar, but it wasn't p ...

javascripthtml

JS How can I generate individual buttons in a loop that trigger separate actions?

Currently, I am working with loops in jQuery to create a series of boxes that contain specific values. The problem arises when I try to assign actions to each box based on the values from an array. For example, I want each box to trigger a different alert ...

javascriptjqueryhtmlcss

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

The Width of Material UI Divider

Currently seeking a method to increase the line thickness of the Material UI Divider, whether by stretching horizontal lines vertically or stretching vertical lines horizontally. I have reviewed the documentation for Material UI v5 on https://mui.com/mate ...

cssmaterial-uiattributesstylingdivider

How can I show the localStorage value in an HTML5 template using Angular2?

I have two keys stored in localStorage and I want to display one of them on my template. I'm having trouble accessing these values. I even created an interface specifically for storing the value of the currentUser key from localStorage. How should I g ...

htmlangularlocal-storageangular2-forms

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...

javascripthtmlcsscarouselslick.js

What is the best way to transform SASS into CSS?

Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...

csssass

Javascript program that generates drag and drop elements using HTML5 features:

Whenever I attempt to drag and drop elements that are normally created by HTML, everything works fine. However, when I try to drag and drop elements generated by JavaScript, I encounter the following error: Uncaught TypeError: Cannot read property 'p ...

javascripthtmldrag-and-dropgenerated

The issue with the min attribute for number inputs not functioning properly when using decimal

When inputting the value 3 in the field and clicking on submit in the HTML snippet below, Chrome displays an error message stating: Please enter a valid value. The two nearest valid values are 2.0001 and 3.0001. This is confusing because I have set the mi ...

javascripthtml

Learn how to call class methods using jQuery events by utilizing the on() method

I'm attempting to create a reusable "component" using both HTML5 and accompanying JavaScript code that can be utilized multiple times. First, let's examine the HTML5 component code: <div class="listEditor" id="myStringList"> <div id="li ...

javascriptjqueryhtml

Retrieve the child DIV element within its sibling without using an identifier

I have a setup similar to the following: <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Tiger128 (v2)</h3> </div> <div class="panel-body"> <inp ...

javascriptjqueryhtml

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: </span> <pre><co ...

htmlcssangulartypescript

Unable to send messages through contact form - Issue with HTML/CSS

I had successfully achieved the desired outcome before, but now I am facing difficulties replicating it. The linked image displays my intended result versus what is currently happening. https://i.stack.imgur.com/QUCuN.png What could be causing this issue ...

htmlcss