The placement of text appears to be incorrect when applying the float:left property in CSS

My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fix it?

<style>
#video1, #video2
{
    float: left;
    margin: 20px 20px 0 0;
}
</style>
<div id="video1">
<iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div id="text1">
this is text1
</div>
<div id="video2">
<iframe src="http://player.vimeo.com/video/67739892" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div id="text2">
this is text2
</div>
css

Answer №1

To properly structure your elements, enclose them in separate divs with the "wrap" ID and float the text and video inside:

<style>
    #text1, #text2 {
        float: right;
        margin: 20px 20px 0 0;
    }

    #video1, #video2 {
        float: left;
        width: 100px;
    }

    .wrap {
        width: 650px;
        float: left;
        border: 1px solid red;
        margin: 20px 20px 0 0;
    }
</style>

<div class="wrap">
    <div id="video1">
        <iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div id="text1">
        this is text1
    </div>
    <div style="clear: both"></div>
</div>

<div class="wrap">
    <div id="video2">
        <iframe src="http://player.vimeo.com/video/67739892" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div id="text2">
        this is text2
    </div>
    <div style="clear: both"></div>
</div>

Answer №2

Your code has been successfully edited and is now functioning properly after the adjustments made. Begin by modifying your html :

<div id="video1">
    <span class="desc">this is text1</span>
    <iframe src="http://player.vimeo.com/video/65706935" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="endfloat"></div>
</div> ....

Next, review the CSS :

.endfloat{ clear: both; margin: 0; padding: 0; }
#video1, #video2
{
   float: left;
   margin: 20px 10px 0 0;
} ....

Feel free to take a look at the complete code on this fiddle. Hopefully, this information proves to be helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting Size Dynamically for Tooltips Based on Content Length

In my angular app using ng-bootstrap v4.2.1 on an older codebase, I have successfully created a tooltip with some very long sentences as content. I am trying to make the tooltip 800px wide, but when I set the width, only the first few words fill the space. ...

htmlcssangularng-bootstrap

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

csssassbootstrap-5

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

htmlcss

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...

cssxhtmlusabilityaccessibility

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

htmlcssangularanimationfloating-action-button

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

javascriptjqueryhtmlcss

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...

cssreactjsgridmaterial-ui

Anomaly with Responsive Images in Internet Explorer 7

Something unusual has come up. In the process of developing a WordPress theme, I needed it to be completely responsive. I decided to create a "gallery" consisting of rows with 3 thumbnails each, which would open in a lightbox when clicked. To achieve this ...

htmlcssimageresponsive-design

Flexbox is not properly repeating elements horizontally

I am struggling to align text boxes horizontally within ngFor loop, and I can't seem to pinpoint the mistake. Here is the HTML code from the parent component: <div class="maintenance-section"> <div class="yearly"> ...

cssangular

How can we display a different navbar based on whether the user is logged in or not?

Can anyone share the most effective methods for displaying a different navbar based on whether or not a user is logged in? I have considered a few approaches: One option might involve creating two separate navbars in the HTML file and using CSS to tog ...

javascriptphphtmlcssajax

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

htmlcsscss-position

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

Learn how to separate two SCSS files and compile them into individual CSS files

Currently, I have two SCSS files that need to be compiled into separate CSS files. For one of the SCSS files, my script looks like this: "watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w", "compile:sass": "node-sass ...

cssnpmsasscompilationwatch

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

What's the trick to aligning navigation items side by side?

I'm currently working with the code snippet below: header { height: 110px; width: 100%; margin-bottom: 130px; position: fixed; top: 0; z-index: 11; /*additional styling removed*/ } nav ul { list-style: none; paddin ...

htmlcsscss-float

What is the reason behind the change in size and shape of the text when using "overflow: hidden"?

Check out this interactive demo using the provided HTML and CSS: You can view the demo by clicking on this link. /*CSS*/ .header { margin: 0px; padding: 0px; width: 100%; } .headertable { padding: 0px; margin: 0px; width: 100%; border-sp ...

htmlcss

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...

javascripthtmlcssgoogle-chromegoogle-chrome-app

The scrollbar is failing to display the entire content on the right side of the HTML document

I am facing an issue with creating a horizontal scroll bar within a div element that contains all the contents. The problem arises when a user scrolls, as it is not fully scrolled to the end of the right side, making it impossible to see the content at the ...

htmlcss