What is the best way to position two divs side by side?

I'm trying to figure out how to align two divs side by side. In the left div, I have four small images stacked on top of each other, and in the right div, there's one large image that takes up the same space as the left div. I've experimented with block, inline-block, and relative positioning, but for some reason, they're not lining up next to each other. I resorted to using absolute positions as a temporary fix, but I know it's not an ideal solution. Here's 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%;
}

How can I get 'side-picture-container' and 'big-product-image' to sit next to each other?

htmlcssbootstrap-modal

Answer №1

After reviewing the CSS code, I noticed some unnecessary elements that could be removed for better functionality. The main issue was with the class used on the "product-image-container," where "col" should have been replaced with "row." Additionally, both the "product-image-container" and "side-picture-container" were utilizing the same class definition with conflicting width properties.

Once these adjustments were made, the existing code began to work correctly.

.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

To begin with, it seems like the current-product-image class is set to absolute positioning.

One possible solution could be utilizing flexbox for arranging elements side by side

Check out this example on jsfiddle

<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

In my version of the code above, I took a different approach. You have the freedom to choose what you prefer, but personally, I try to avoid using margin 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

        . //"this is the styling for the container "
    {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18rem, auto));
 // set uniform gaps using your preferred dimension in px or rem
      gap:2rem;
  //the horizontal spacing between elements    
     row-gap:2rem;
//the vertical spacing between elements
     column-gap:2rem; 
    
    }

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

What are some techniques for customizing an iframe?

When incorporating an iframe with prettyPhoto, the code to use is as follows: <a href="stories/story1txt.php?iframe=true&width=400&height=200" rel="prettyPhoto"> <img src="images/story1.jpg"/></a> The contents of the story1txt.p ...

phpcssiframe

Implementing a jquery lightbox extension for dynamically loading images using ajax requests

When I first load my page, I have a group of images that are linked to the lightbox plugin. Clicking on these images triggers the plugin as expected. However, I also have AJAX implemented using jQuery which updates the image list based on server response w ...

jqueryhtmllightbox

merging the central pair of columns in the bottom row

I am having trouble combining the middle two columns in the third row of my table code. The columns remain separate and do not merge as intended. Can anyone help me identify what is causing this issue in my code? table { border: 1px solid #999; } td ...

htmlhtml-table

Error encountered while processing input data from an HTML form

I've been attempting to retrieve records from a TABLE page, but every time I do so, it leads me to a 404 error. My ID name is headid, and as part of learning about CRUd operations, my goal is to display the records in a printable form rather than a ta ...

phphtmlmysqldatabasecrud

Determining the background image size of a div when the window is resized

I'm facing a problem that I can't seem to solve. I have a div with a background image. <div class="a"></div> I want to make a specific point of this background image clickable. I know I can achieve this by adding a div with a z-inde ...

javascriptjqueryhtmlcssresponsive

When the start button is pressed, the page will automatically refresh until the stop button is clicked. Learn how to track the duration of the start button press

I have a table of data that I need to continuously update with the latest values from the database. In order to do this, the page automatically refreshes every 10 seconds. The updating process is triggered when the user clicks the start button and stops ...

phphtmlmysql

Efficiently loading images in Angular7 with lazy loading

From the backend, I am receiving 5000 images that need to be lazy-loaded. Despite implementing the ng-lazyload-image module after watching some videos, it is not functioning as anticipated. Unfortunately, my page crashes every few seconds, and the tab beco ...

htmlangularlazy-loading

Using Angular's ngIf directive to dynamically add the selected attribute to an option based on a specific string

I need to dynamically set the selected attribute for an option in a select drop-down list. Here is an example of what I want to achieve: <select name="gcodeProfile"> <option value="HT Translucent F WF 500 um.gcode.profile& ...

htmlangularangular-ng-if

JavaScript function for dividing the table into months

I am looking to organize a table where the data is automatically generated, but I want to separate it by months in descending order. Each table should be grouped by the month name and year they correspond to. To assist with understanding my request, I hav ...

javascriptjqueryhtml

Assistance with HTML Design

Can someone please assist me with HTML styling? Here is the situation: <div id="hidden" style="display: none;"> <label>URL:</label> <input type="text" name="url" size="50"/><br/> <input type="button" id="button2" value="U ...

html

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...

jqueryhtmlregexhighlight

Python script executed in DJANGO is displaying the output as "none"

I have a DJANGO app (kwtest) that includes VIEWS(a+b) and their respective URLs. When I navigate to the first kw_dash (kw_dash.html) URL and click a button, it triggers a python script (from import) and is supposed to display the results on the "return_res ...

pythonhtmldjango

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...

javascripthtmlcss

Guide on creating a line chart resembling the one in Highcharts library

I would like to create a line chart using the HighChart library, using data similar to what is shown in the image below. However, I am not familiar with HTML, CSS, or JavaScript and don't know how to go about developing this. Can anyone provide guidan ...

javascripthtmlcsshighchartsdata-visualization

How can I use jQuery to reposition an inner element to the front?

Imagine you have a collection of elements: <ul id="ImportantNumbers"> <li id="one"></li> <li id="two"></li> <li id="topNumber"></li> <li id="four"></li> </ul> Every five seconds, the ...

jqueryhtmlsorting

Issues with Nav pills (bootstrap 4) not properly setting active states

I am attempting to add a background color to the active state of the Nav Pill. Here is the HTML and CSS code I am using: .nav-pills > .nav-item > .nav-link:active{ background: red!important; color: white!important; } .nav-pills > .nav-ite ...

cssbootstrap-4nav

Ways to customize the appearance of a search box

I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...

phpcsssearch

Error Panel Style Message Format:

Currently, I am utilizing PrimeFaces, which utilizes JQuery UI not just for its functionality but also for its CSS styling framework. The issue I am facing stems from my lack of understanding about the CSS framework, as I have been unable to locate any exa ...

jquery-uicssprimefaces

Trouble with jQuery noConflict function not resolving as expected

I'm attempting to use both jQuery 1.4 and 2.0 by utilizing the noConflict function, but the code isn't working as expected. Here is an example of my document head: <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> ...

javascriptjqueryhtmlcss

Troubles with z-index implementation in HTML

Seeking guidance on an html page containing a dropdown menu with z-index positioning, set absolutely with specific left and top values. The issue arises when the window is resized, causing the dropdown menu to shift position awkwardly. This problem seems t ...

htmlcssz-index