CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Siddharthan Asokan
Siddharthan Asokan

Reputation: 4441

Aligning Img tag side by with p tag below each image - CSS

I'm trying to align the image files side by with the image description right below it. This is my code below:

for (var i = 0; i < imgFilePathArray.length; i++) {

  //html & css
  var elementID = 'img' + (i+1).toString();
  var element = document.createElement('img');
  element.src = imgFilePathArray[i];
  console.log(imgFilePathArray[i]);
  element.id = elementID;
  document.body.appendChild(element);

  document.getElementById(elementID).style.width='50%';

  element.style.height = 300;
  element.style.display = 'inline-block';


  if (i > 1) {
    var errorP; 
    if (i%2==0) {
      var frontErrorArray = errorInfo[buildVersion[buildCount]].split("$")[0];
      var errorString = "";
      errorString = frontErrorArray.toString();  

       //html & css
      errorP = document.createElement('p');
      var errorTextNode = document.createTextNode(errorString);
      errorP.appendChild(errorTextNode);

    }else{
      var backErrorArray = errorInfo[buildVersion[buildCount]].split("$")[1];
      var errorString = "";
      errorString = backErrorArray.toString();
      console.log(errorInfo[buildVersion[buildCount]].split("$")[1]);

      //html & css
      errorP = document.createElement('p');
      var errorTextNode = document.createTextNode(errorString);
      errorP.appendChild(errorTextNode);



      buildCount = buildCount + 1;
    }
    document.body.appendChild(errorP);
  };

}

The above execution gives me a layout like the image below: enter image description here

I want the image to be by the side of each other and the text to be right below each image. Any idea what css styling should I amend to achieve that state?

Upvotes: 0

Views: 741

Answers (1)

Vadim
Vadim

Reputation: 179

Basically you need to have the divs that contain image and text have a css style float:left to achieve this.

Upvotes: 1

Related Questions