CODEWITHSUNDEEP
htmlcssbootstrap-modal
Marco Aiello
Marco Aiello

Reputation: 177

How do I align two divs next to each other?

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?

Upvotes: 0

Views: 90

Answers (4)

Edd Michira
Edd Michira

Reputation: 101

        . //"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; 
    
    }

Upvotes: 0

jozef koko
jozef koko

Reputation: 142

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

Upvotes: 0

computercarguy
computercarguy

Reputation: 2453

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>

Upvotes: 1

Kevon
Kevon

Reputation: 1297

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

Upvotes: 0

Related Questions