CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

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>

Upvotes: 0

Views: 70

Answers (3)

snecserc
snecserc

Reputation: 615

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

Upvotes: 2

Abdelrahman Mohsen
Abdelrahman Mohsen

Reputation: 72

use display: inline-block instead of float: left 

.backgroundimage {
  position: relative;
  top: 70px;
  right: 390px;
  display: inline-block;
}
.Youtube {
  position: absolute;
  left: 500px;
  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>

Upvotes: 0

James Allan
James Allan

Reputation: 280

Use bootstrap on your page. Grab bootstrap CND on the site..

http://getbootstrap.com/getting-started/

And now try this..

<div class="container">
    <div class="row">
        <div class="col-sm-6">
           <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>
        </div>
        <div class="col-sm-6">
            <p>Hi, this is some test text!</p>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions