Placing two divs next to each other (responsive theme in mind) - html

Question

Having an issue getting my divs to fall next to each other. I've been scouring forums for a few hours, but with no success.
I'm trying to create a collage with six images. At the moment, all of my images are running down the left side, one after the other. It's probably important to note that I have set these 6 images as the background of six different divs, all housed within the "Collage" div.
I've tried applying float to one of these 6 relative divs, but it just disappears.
Normally I would have just set this all in pixels and moved everything around manually, but I am aiming for responsive layout.
How can I make the images appear beside 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>

Answer 1

Show different sized images side by side nicely
To display the images next to each other, use CSS columns and display:inline-block children. Use font-size: 0 on the parent and font-size: insert font size on the children to neutralize the white-space between elements.
#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;
}
Maintain div aspect ratio
Use the css padding trick to maintain the aspect ratio of the images. You have different sized images so the padding-bottom property on the parent will change for each size.
[id^="collagecont"] {
background-size: cover;
background-repeat: no-repeat;
}
#collagecont1 {
padding-bottom: 46.5%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont2 {
padding-bottom: 120%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
}
#collagecont3 {
padding-bottom: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont4 {
padding-bottom: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont5 {
padding-bottom: 46.5%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont6 {
padding-bottom: 46.5%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
Other code simplifications of lesser importance 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('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont2 {
padding-bottom: 120%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/PHALANTAFRONTPAGEAD.jpg?10407604049650997072');
}
#collagecont3 {
padding-bottom: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/SANTACLAUSEFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont4 {
padding-bottom: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/EXORBUTTERFRONTPAGEAD.jpg?10527560584571387867');
}
#collagecont5 {
padding-bottom: 46.5%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
#collagecont6 {
padding-bottom: 46.5%;
background-image: url('https://cdn.shopify.com/s/files/1/0813/2907/files/935COLPAGECOV.jpg?10407604049650997072');
}
<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

With absolute positioning everything becomes posistioned relative to the parent. What the responsive css frameworks like bootstrap use are floating elements.
When you float something it shrink wraps to the size of the content unless you give it a width. So to float 6 items one next to the other they can't be wider than 16.66666667% (100%/6). Your large class would become:
.large {
float: left;
width: 16.6%;
}
The following fiddle demonstrates the effect:
https://jsfiddle.net/30j3046d/

Answer 3

The first problem is that you need to set your divs to be displayed as an inline-block. Then next problem is that you need to set a min-width on your divs. I was able to solve both issues using this:
div[id^=collagecont] {
display: inline-block;
min-width: 30%;
}
However, it would probably be better to add a class to your divs and put all of the like 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

add the following code to your css
#collagecont1.large, #collagecont2.large, #collagecont2.large, #collagecont4.large, #collagecont5.large, #collagecont6.large{display:inline-block;}
if you put your class next to your id and get rid of the inside div like this
<div id="collagecont1" class="large">
it'll probably be more what you're looking for
Output