✔ HTML; CSS iframe und p nebeneinander setzen

[Kiwibombe]

Hallo, ich möchte gerne, dass Video und Text nebeneinander im Browser stehen, was aber nicht funktioniert.
HTML-Code:

<div>
           <iframe width="600px" height="350" src="https://www.youtube.com/embed/w8UjQ_hYfh4"
                   frameborder="0" class="video"></iframe>
               <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maurisaliquam volutpat   ipsum nec maximus.</p>
       </div>
       </div>

.video{
   float: left;
   width: 600px;
}
.text{
   width: auto;
   margin-left: 610px;
}

Es wird im Browser untereinander angezeigt.
Ich würde mich für eine gute (und schnelle) Antwort freuen.

 

[MrMurphy]

Hallo

div-Elemente sind Blockelemente und haben deshalb grundsätzlich eine Breite von 100%. Deshalb passt der Text auch nicht neben das iFrame-Element.

Ich würde für dein Beispiel eher zu Flexbox als zu float greifen. Dann sieht der HTML-Quelltext zum Beispiel so aus:

      <section class="multimedia">
         <iframe src="https://www.youtube.com/embed/w8UjQ_hYfh4" frameborder="0" allowfullscreen></iframe>
         <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maurisaliquam volutpat ipsum nec maximus.</p>
         </article>
      </section>

und das grundlegende CSS so:

      .multimedia {
         max-width: 1200px;
         display: flex;
      }
      .multimedia iframe {
         width: 600px;
         height: 350px;
         margin: 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: auto;
      }
      .multimedia article {
         margin: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }

Die Werte können natürlich noch den individuellen Vorstellungen angepasst werden.

Und gleich eine Testseite zum direkten ausprobieren:

http://boratb.bplaced.net/index41.html

Gruss

MrMurphy

 

[Kiwibombe]

Danke MrMurphy, es funktionert jetzt.

 

[Kiwibombe]

Ich bekam erst nicht hin, dass der Text unter dem Video angezeigt wird, wenn der Browser eine bestimmte Größe bekommt.

Lösung:

@media only screen and (max-width: 950px) {
    .multimedia   {
        flex-direction: column;
     }
}