Display 3 divs in same line (Image Gallery+Text+Webform)

2
votes

I'm trying to display 3 divs in the same line. Developing in Drupal8 Bootstrap Theme (working on Subtheme). These Divs are fields inside a view called viewproducts.

The divs are as follows:

  1. Juicebox Photo Gallery;
  2. Text: "Title"+"Reference Label:" & "Reference number"+ "Description" + "Price Label" & "Price";
  3. Webform: "First and Last Name"+ "Email" + "Phone" + "Message" + "Send Button"

The idea is to have products rows, each row being formed by the elements described above in the following order in the screen:

LEFT: Juicebox Gallery          CENTER: Text group of elements          RIGHT: Webform

Gallery=Ok;

Text group; How to address all the elements to bring them to the center but maintaining the specified order;

Webform; How to address all the elements to bring them to the center but maintaining it's webform order assuming I can't (or don't want/need to) access HTML;

I'm already confused after so many tests that I may have unnecessary code below. Thanks all for your help. Tried with relative position, without it, absolute doesn't work since every element it's aligned on top of each other! Etc..Etc..Etc..

SO below class names from the specified elements:

  • Juicebox gallery: "viewimagefield"

  • Text Group:

    • Article Title:"viewtitlelabel" and "viewtitlefield"
    • Article Reference: "viewreflabel" and "viewrefrield"
    • Article Description: "viewdescriptionfield"
    • Article Price: "viewpricelabel" and "viewpricefield"

  • Webform class="viewform": -First and Last Name :"prodformname"

    • email: "prodformemail"
    • phone: "prodformphone"
    • message: "prodformmessage"
    • send: "prodformbutton"
.viewproducts ul {
  list-style-type:none;
  align-content: flex-start;
}
.viewproducts .view-content .views-row{
  float: left;
  height:50% !important;
  margin: ;
}
.viewproducts .view-content .viewimagefield{
  float: left;
  width:40% !important;
  margin: 0;
  border-radius: 10%;
}
.viewproducts .view-content .viewtitlelabel,.viewproducts .view-content .viewtitlefield{
  position: relative;
  top:50% !important;
  left:50% !important;
  background-color: transparent;
}
.viewproducts .view-content .viewreflabel,.viewproducts .view-content .viewreffield{
  position: relative;
  top:45% !important;
  left:40% !important;
  display: inline-block;
  margin-right: 1%;
}
.viewproducts .view-content .viewdescriptionfield{
  position: relative;
  word-wrap: break-word;
  margin-top: 1%;
  max-width: 80%;
}
.viewproducts .view-content .viewpricelabel,.viewproducts .view-content .viewpricefield{
  position: relative;
  display: inline-block;
  margin-right: 1%;
}
.viewproducts .view-content .viewform{
  top:18% !important;
  left:20% !important;
}
.juicebox-container{
  position: relative !important;
  float: left !important;
  left: 1% !important;
  width: 100% !important;
  border-radius: 10%;
}
.prodformname, .prodformemail, .prodformphone, .prodformmessage, .prodformabout, .prodformbutton{
  position: relative !important;
  display: inline-block;
  float: left !important;
  top: 1% !important;
  left: 70% !important;
  width: 30% !important;
  content: "";
  clear: both;
}

The output is the Gallery on the left, Text on center but disaligned and some behind the gallery. Form below both and elements inline, below, etc. I can't understand a specific order here :( Just an Idea of whats happening in the pic below: enter image description here

here the fiddle There's lots of info in the HTML (please be aware that I don't want to change html since i'm working with the Drupal framework and not html coding directly)

1
csswebformsbootstrap-4drupal-8drupal-views
Create a full jsfiddle example - StefanBob
Hey @StefanBob just did the fiddle, please check jsfiddle.net/marcosv/ta4kcq7p/18 Thanks in advance for your help! - MSV
That fiddle and your website code is a mess! I'm out... stackoverflow.com/help/mcve - StefanBob
@StefanBob, the code is a mess because is the automatic code generated by drupal framework. While working with it you are supposed to use the framework instead of working on html directly. I simply copied the whole html code of the page! Thanks anyway - MSV

1 Answers

0
votes

You can accomplish this using the Bootstrap grid system:

    <div class="row">
        <div class="col-4"> 
        //Left section 
        </div> 

        <div class="col-4">
        //Center section 
        </div> 

        <div class="col-4">
        //Right section 
        </div> 
    </div>

This will give you equal width sections in the same row.

I suggest you take a look at Bootstrap Grid System

You can probably achieve similar results by applying float:left; to each div using CSS