Check out my js fiddle below:
https://jsfiddle.net/9yj63s3f/
Here is the CSS code snippet:
.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 am trying to align the paragraph next to the video on the right by setting it as float:left, but it's not working. What could be causing this issue and how can I solve it?
Codepen http://codepen.io/noobskie/pen/gaorXm?editors=110
I'm uncertain about how the following code relates to this situation:
.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 issue with float:left not functioning correctly is due to the use of absolute positioning to make the iframe responsive. However, when using absolute positioning, the div collapses, causing text to be hidden beneath the iframe.
When embedding a video in your HTML code within a div set to 100% width, it raises the question: should the paragraph also be contained within that same 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>
I am looking to align the paragraph next to the video on the right side
Here is a straightforward method to achieve this:
Custom Styling Code (CSS)
#wrapper { display: flex; }
Live Example: https://example.com/code123
Explore more about CSS Flexbox Techniques.
To solve this issue, a simple solution would be to replace the p tag with pre. By doing this, the text will start filling from the right side of your video div.
<pre style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</pre>
I made some adjustments to your fiddle and here is the modified code: (just in case you can't access the 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>
My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...
I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...
Initially, my goal is to verify the existence of the modal and then proceed by clicking "continue". However, I am facing an issue where I can click continue without successfully determining if the modal exists in the first place. This occurs because when I ...
I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...
The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...
Is there a simple method to add an input text element with a clear icon on the right side, similar to the layout of the Google search box? I've searched, but I could only find instructions for placing an icon as the background of the input element. I ...
Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...
<form method="POST" action="question-function.php"> <label>Choose Category</label> <select name="catid" id="catid" class="form-control"> <?php $sel3 = mysqli_query($ ...
Can someone assist me in changing the background color of my portfolio to white? I attempted to use global CSS, but the black background on both sides of the page is preventing the change. return ( <> <Navbar /> <main className= ...
I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...
Currently, I am honing my web scraping abilities by utilizing the World Surf League website. So far, I have not extracted any data; instead, I am focusing on navigating the site using Selenium. However, I have hit a roadblock where I am unable to 'cli ...
Have you ever wondered why people emphasize the minification of web assets like CSS and JavaScript, yet rarely mention doing the same for markup? It's interesting to note that CSS and JavaScript are often reused across multiple pages, whereas markup i ...
Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...
I am attempting to implement some jQuery on a page that is loaded into a div using the .load() function. The PHP code loaded into the div contains a hidden section that slides out when a link is clicked. However, I am facing an issue where the div slides b ...
I am currently dealing with a clickable div element which has a collapse functionality, and there is also a link placed on top of it: <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-h ...
As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...
Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...
Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even t ...
Let's say I have an aspx textbox with id="txtkms". In the HTML view source, it appears as ContentPlaceHolder1_Gridview1_txtkms_1. I'm curious if this control will always be rendered as ContentPlaceHolder1_Gridview1_txtkms_1 every time I run my as ...
One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...