CODEWITHSUNDEEP
javascripthtmlcss
Hashini
Hashini

Reputation: 89

How to display two elements on the same line?

Here I want to display this slide show and the video inline. I've tried thousand different examples but they couldn't solve my problem. Any helpful suggestion will be an immense help as i'm a beginner to web developing. Thank You!

var myIndex = 0;

carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  myIndex++;

  if (myIndex > x.length) {
    myIndex = 1
  }

  x[myIndex - 1].style.display = "block";

  setTimeout(carousel, 4000);
}
<div class="slideshow" style="max-width: 600px" style="display: inline" style="float: right">

  <div>
    <img class="mySlides" src="canada.jpg" style="width: 100%" alt="canada">
    <img class="mySlides" src="myanmar.jpg" style="width: 100%" alt="myanmar">
    <img class="mySlides" src="china.jpg" style="width: 100%" alt="china">
    <img class="mySlides" src="italy.jpg" style="width: 100%" alt="italy">
  </div>

  <div>
    <video width="400" controls style="float: right" style="display: inline" poster="http://via.placeholder.com/320x280?text=video">
		<source src="Intro.mp4" type = "video/mp4">
	</video>
  </div>

</div>

Upvotes: 0

Views: 3972

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372194

Any time you want to put two elements on the same row, give their parent display: flex.

By default, the children of a flex container line up side by side. You can then use flex properties to control their size and positioning.

Alternatively, you can switch the display value of child elements to inline or inline-block.

Upvotes: 2

user234932
user234932

Reputation:

Nowadays you can use flexboxes to put two elements side-by-side. CSS-tricks has a very thorough guide on the topic, so I won't bre you with the details.

In your particular case, use something like:

.slideshow {
  display: flex;
  justify-content: space-between;
  // no float and similar here
}

.slideshow > div {
  width: 50%;
}

You may need to prefix the flex and justify-content for better cross-browser support, and you may need to add flex: 1 for IE 10 support.

You could also clean the code up a little. You don't want to use whitespace around the = sign in the attributes, and you don't need to specify the style attribute multiple times. One is enough, with semicolon-separated rules.

Upvotes: 2

Related Questions