Gunnar Bittersmann: Design ohne Tabellen

Beitrag lesen

Hello out there!

<p>
  <img src='SEHR KLEINES BILD'>
  <span>CA. 255 ZEICHEN TEXT</span>
</p>

Aber ich habe keine Ahnung, wie man das dann formatieren soll, dass der Text neben den Bild steht und dann nicht drumherum und nur die erste Zeile.

Mit
  ~~~css img {
    float: left;
    margin-right: 10px; /* Zwischenraum zum Text */
  }

erreichst du, dass der Text das Bild umfließt, also mehr als die erste Zeile neben dem Bild steht (entprechende Bildhöhe vorausgesetzt).  
  
So der Text nicht unter dem Bild weiterlaufen, sondern in sich linksbündig, erreichst du das mit  
  ~~~css
span {  
    display: block;  
  }

Eine andere Möglichkeit wäre, dem 'p' genügend linken Abstand zu geben und das Bild aus dem Elementfluss zu nehmen und links neben dem Text zu plazieren (dann brauchst du auch kein 'span'):
  ~~~css p {
    margin-left: 100px;  /* Bildbreite und Zwischenraum /
  img {
    position: absolute;
    left: 10px;          /
Abstand vom linken Rand */
  }

  
See ya up the road,  
Gunnar

-- 
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)