Formatting Text to the right of an image in Html/CSS/JS

So Im trying to make a div in javascript with the following format I drew.

enter image description here

So the outside black box is the div container. The left side red box is an img I want to insert. And the red boxes on the right are lines of text I wish to add. The blue box is a button I am going to add. I can insert the image in the proper location, but I am having lots of trouble inserting the lines of text on the right side of the image. I tried to add styling with self-align: right, but it just puts the text under the image. I have also tried float: left for the image, and that didn’t work out as I had intended. I am using flex-box for this div, though I may not be using it correctly.

Can someone please tell me how I would format such a div in html/css/js? Also this is created dynamically using javascript, so absolute positioning definitely will not not work here. Here is the javascript.

var flexcontainer = document.createElement("div");

flexcontainer.style = "border-left: 10px solid red; padding: 10px; margin: 15px 0px; background-color: black;";
flexcontainer.classList.add("flex-container;");
var poster = document.createElement("img");
poster.src = "https://cinemaone.net/images/movie_placeholder.png";
poster.style = "flex-grow: 1;";
flexcontainer.appendChild(poster);

var content = document.createElement("div");
content.style = "flex-grow: 9; color: white; self-align: right;";
content.innerHTML = "HIIIIIIIIIIIIIIIIIIIIIIIIII";
flexcontainer.appendChild(content);

document.getElementById("resultscontainer").appendChild(flexcontainer);

http://jsfiddle.net/unt7brz2/12

Answer

Its very simple actually. I would recommend you to learn flexbox, and you should have no trouble in making these kind of layouts.

Also, if you want to add multiple class in javascript, you could do like div.classList.add("classOne", "classTwo", "classThree");. Also, you dont have to separate classnames with ; like you do when adding style.

var flexcontainer = document.createElement("div");
flexcontainer.classList.add("flex-container");

var poster = document.createElement("img");
poster.src = "https://cinemaone.net/images/movie_placeholder.png";
poster.classList.add("poster");
flexcontainer.appendChild(poster);

var content = document.createElement("div");
content.classList.add("content");
content.innerHTML = "HIIIIIIIIIIIIIIIIIIIIIIIIII";
flexcontainer.appendChild(content);

document.getElementById("resultscontainer").appendChild(flexcontainer);
.flex-container {
  display: flex;
  border-left: 10px solid red;
  padding: 10px;
  margin: 15px 0px;
  background-color: black;
}

.poster {
   flex-grow: 1;
   flex-basis: 50%;
}

.content {
  color: white;
  flex-basis: 50%;
  padding: 0 15px;
}
<!DOCTYPE html>
<html>
<body>
 
  <div id="resultscontainer">
  </div>  
 
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *