flexibles CSS-Layout mit 2 Spalten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • flexibles CSS-Layout mit 2 Spalten

    Innerhalb eines Content-Bereiches (hier: 435px) sollen 2 Spalten angezeigt werden. In den [good?] old times wäre das mit einer HTML-Tabelle bekanntlich no Problemo ;) In der Spalte 1 steht der Text und in der Spalte 2 steht ein Bild. Abhängig von den Eingaben im CMS ist der Text je nach Webseite unterschiedlich lang (dies können 3 Wörter oder auch n Absätze sein…). Das ausgewählte Bild kann je nach Webseite ebenso unterschiedlich breit sein.

    Die Spalte 2 kann nun ja recht einfach mit einer Breite versehen werden, indem über getimagesize (PHP) die Bildbreite ermittelt wird und die Spalte z.B. mit style=“width:120px“ formatiert wird. Das Problem ist die Spalte 1. Wenn keine feste CSS-Breite angegeben wird, kommt es je nach Textlänge zu fehlerhaften Darstellungen (in dem hier beigefügten Beispielcode wird das Bild unterhalb des Textes angezeigt)

    Mit einem Workaround könnte die Sache zwar quick and dirty gelöst werden, indem die Contentbreite (435px) zusätzlich noch als PHP-Variable abgelegt wird und dann die Breite der Spalte 1 in Abhängigkeit von der jeweiligen Bildbreite berechnet werden würde… Hat jemand eine Idee, wie man das stattdessen nicht besser mit einer vernünftigen CSS-Lösung hinbekommt, ohne dass man die Breite redundant auch noch in eine PHP-Variable packen muss - evtl. mit Ausrichtung oder Positionierung ?

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head><title>2spaltiges CSS-Layout</title></head>
    4. <style type="text/css">
    5. #content { width:435px; }
    6. </style>
    7. <body>
    8. <div id="content">
    9. <!-- SPALTE 1 -->
    10. <div style="float:left">
    11. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    12. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    13. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    14. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    15. </div>
    16. <!-- SPALTE 2 -->
    17. <div style="width:120; float:left"><img src="abc.jpg" width="120" height="70"></div>
    19. </div>
    20. </body>
    21. </html>
    Alles anzeigen

  • Mit folgender Lektüre löst du das Problemschen:


    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head><title>2spaltiges CSS-Layout</title></head>
    4. <style type="text/css">
    5. #content { width:435px; }
    6. </style>
    7. <body>
    8. <div id="content">
    9. <!-- SPALTE 2 -->
    10. <div style="float:right;"><img src="abc.jpg" width="120" height="70"></div>
    12. <!-- SPALTE 1 -->
    13. <div style="overflow:hidden;">
    14. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    15. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    16. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    17. <p>Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen. Wenn an dieser Stelle ein laengerer Text steht, kommt es zu Darstellungsproblemen.
    18. </div>
    20. </div>
    21. </body>
    22. </html>
    Alles anzeigen