How do I align two divs next to each other? - html

Question

I am trying to align two divs next to each other. The left div has four small images on top of each other, and the right div has one large image the size of the left div. I've been trying to use block and inline-block as well as relative positioning for them, but I don't understand why they are not aligning next to each other. I got a temporary solution using absolute positions but I know it's not really something functional. Here is my code:
HTML
<div class="container product-container">
<!--Product Information-->
<div class="row row-sm">
<!--Product Images-->
<div class="col-md-6 product-image-container">
<!--Side Images-->
<div class="side-picture-container">
<ul class="picture-list">
<li><img src="https://s.fotorama.io/1.jpg"></li>
<li><img src="https://s.fotorama.io/2.jpg"></li>
<li><img src="https://s.fotorama.io/3.jpg"></li>
<li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
</ul>
</div>
<!--Current Product Image-->
<div class="big-product-image">
<img class="current-product-image" src="https://s.fotorama.io/1.jpg">
</div>
</div>
<!--Product Text-->
<div class="col-md-6">
</div>
</div>
</div>
CSS
.product-container
{
margin-top: 4vw;
display: block;
}
.product-image-container
{
display: inline-block;
}
.picture-list li
{
display: inline-block;
width: 110px;
height: 114px;
border: none;
}
.picture-list li img
{
width: 97%;
height: auto;
}
.product-image-container .side-picture-container
{
width: 90px;
display: inline-block;
vertical-align: top;
margin-top: 0px;
position: relative;
}
.picture-list li img
{
height: 100px;
object-fit: cover;
border-radius: 10%;
}
/* .big-product-image
{
position: relative;
} */
.current-product-image
{
position: absolute;
height: 450px;
width: 350px;
margin-top: 0.25vw;
border-radius: 10%;
top: 27.75%;
left: 20%;
}
What do I need to do to get 'side-picture-container' and 'big-product-image' next to each other?

Answer 1

Well, there's a lot of CSS that didn't need to be there. The biggest problem, once the absolute positioning was removed, was a combination of using "col" instead of "row" for a class on the "product-image-container" and having both "product-image-container" & "side-picture-container" using the same class definition with the "width: 90px;".
Once I made those changes, what you had worked.
.product-container
{
margin-top: 4vw;
}
.product-image-container
{
display: flex;
}
.picture-list li
{
width: 110px;
height: 114px;
border: none;
}
.picture-list li img
{
width: 97%;
height: auto;
}
.product-image-container .side-picture-container
{
vertical-align: top;
margin-top: 0px;
}
.picture-list li img
{
height: 100px;
border-radius: 10%;
}
.current-product-image
{
height: 450px;
width: 350px;
margin-top: 0.25vw;
border-radius: 10%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container product-container">
<!--Product Information-->
<div class="row-md-6">
<!--Product Images-->
<div class="row-md-6 product-image-container">
<!--Side Images-->
<div class="col-md-6 side-picture-container">
<ul class="picture-list">
<li><img src="https://s.fotorama.io/1.jpg"></li>
<li><img src="https://s.fotorama.io/2.jpg"></li>
<li><img src="https://s.fotorama.io/3.jpg"></li>
<li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
</ul>
</div>
<!--Current Product Image-->
<div class="big-product-image">
<img class="current-product-image" src="https://s.fotorama.io/1.jpg">
</div>
</div>
<!--Product Text-->
<div class="col-md-6">
</div>
</div>
</div>

Answer 2

Well, for starters, your current-product-image class is positioned absolute.
I suggest using flex to position things side by side
https://jsfiddle.net/c23ad57b/
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}

Answer 3

I just make the code above in a different way...and you can pick what you like, and for me, I don't like to use margin, i avoid it as much as possible
.flex-container {
display: flex;
gap: 10px;
}
/* any child element of flex container that has .flex-child can grow by 1 */
.flex-container > *.flex-child {
flex: 1;
border: 2px solid yellow;
}

Answer 4

. //"the class for the div "
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, auto));
// this will be the uniform gaps. You can use your dimension in px or rem
gap:2rem;
//this will the horizontal gaps between the divs
row-gap:2rem;
//this will be the vertical gaps between the divs
column-gap:2rem;
}