Thomas Hutton Thomas Hutton - 8 months ago 43
CSS Question

Have Writing Beside Div

I'm trying to have two divs (one with an embedded YouTube video sitting over an image, and another is text) sit side-by-side. I would usually do this with the

float: left;
rule, however it's trickier with the CSS/HTML combo for the video over the image.

How can I go about doing this?

My code:



.backgroundimage {
position: relative;
top: 70px;
right: 390px;
float: left;
}
.Youtube {
position: absolute;
left: 280px;
bottom: 46px;
}

<div class="backgroundimage">
<img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
<iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
<p>Hi, this is some test text!</p>
</div>




Answer

Check this JSFiddle to see it wroking.

So I think instead of using <img/> you can use the CSS property to display image in the background. The CSS code:

.backgroundimage {
  position: relative;
  background: url("http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png") no-repeat;
  height:329px;
}
.Youtube {
  position: absolute;
  left:10px;
  top:10px;
} 
p{
  position: absolute;
  right:0;
  width:140px;
}

Edited Check this JSFiddle for a responsive text