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

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 >
    <!--Product Information-->
    <div >
        <!--Product Images-->
        <div >
          <!--Side Images-->
          <div >
            <ul >
              <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 >
            <img  src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div >

        </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?

CodePudding user response：

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 >
    <!--Product Information-->
    <div >
        <!--Product Images-->
        <div >
          <!--Side Images-->
          <div >
            <ul >
              <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 >
            <img  src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div >

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

CodePudding user response：

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 >

  <div >
    Flex Column 1
  </div>
  
  <div >
    Flex Column 2
  </div>
  
</div>

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
}

CodePudding user response：

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;
}