CODEWITHSUNDEEP
htmlcss
Carlos Miguel Colanta
Carlos Miguel Colanta

Reputation: 2823

Float:left div with a paragraph/text on the right

This is my js fiddle:

https://jsfiddle.net/9yj63s3f/

here is the css code:

.viddiv{
   float:left; width:50%;  
}

.vidholder{
    position:relative;height:0;padding-bottom:50%;
    width:50%;
    float:left;
}

iframe{
    position:absolute; height:100%; width:100%;top:0;left:0;

}

I want to put the paragraph beside the video on the right, i already tried setting it as float:left but it still wouldn't work. what should i do?

Upvotes: 0

Views: 61

Answers (5)

Lahori
Lahori

Reputation: 1091

I have tweeked your fiddle a little and this is the resulting code: (in case you don't have access to fiddle)

<style>

.viddiv{
   float:left; width:50%;  
}

.vidholder{
    position:relative;height:0;padding-bottom:50%;
    width:50%;
    float:left;
}
figure {
    width:100%;
}
figure iframe{
    height:100%; width:50%;float:left;

}

figure figcaption {
    width:50%;
    float:right;
}
</style>

<div style="width:100%">

<div class="vidholder">
<figure>
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
    <figcaption>
        <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
    </figcaption>
</figure>
</div>

</div>

jsfiddle

Upvotes: 1

Geethanjali B L
Geethanjali B L

Reputation: 66

Simple solution is to change p tag to pre this will fill the text from right side of your video div.

<pre style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</pre>

Upvotes: 1

NooBskie
NooBskie

Reputation: 3841

Codepen http://codepen.io/noobskie/pen/gaorXm?editors=110

Im not sure where this code underneath applies to this

.viddiv{
   float:left; width:50%;  
}

Snippet 

.vidholder {
  position: relative;
  height: 0;
  padding-bottom: 50%;
  width: 50%;
  float: left;
}
iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.textContainer {
  width: 50%;
  float: right;
}
<div style="width:100%">

  <div class="vidholder">
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="textContainer">
    <p style=" word-wrap: break-word;">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
  </div>
</div>

Edit The reason why float:left wont work is because your using absolute position to make the iframe responsive, however with absolute position the div collapses causing the text to hide underneath your iframe.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371231

I want to put the paragraph beside the video on the right

Here's a very simple way to do it:

CSS

#container { display: flex; }

DEMO: https://jsfiddle.net/9yj63s3f/1/

Learn more about CSS Flexbox.

Upvotes: 1

Meri Alvarado
Meri Alvarado

Reputation: 191

in your html code, you include the video in a div with 100% width. Should the paragraph be included in that div?

<div style="width:100%">

  <div class="vidholder">
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>

  <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>

</div>

Upvotes: 1

Related Questions