HTML; CSS iframe und p nebeneinander setzen


Kiwibombe

Grünschnabel
#1
Hallo, ich möchte gerne, dass Video und Text nebeneinander im Browser stehen, was aber nicht funktioniert.
HTML-Code:
HTML:
<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>
CSS:
.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.
 
#2
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:

Code:
      <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:

Code:
      .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

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

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