ShiNtoKu: Zweispaltiger Bereich mit float

SELF-Forum

Zweispaltiger Bereich mit float

ShiNtoKu
– Informationen zu den Bewertungsregeln

Hallo,

auf dieser Beispielseite befindet sich innerhalb eines Containers ein Fliesstext sowie ein links gefloatetes Bild.

Nun moechte ich erreichen, dass ein zweispaltiges Layout entsteht, mit dem Bild in der linken Spalte und dem Text in der rechten Spalte. Der Text soll _nicht_ wie auf der Beispielseite um das Bild fliessen.
Natuerlich kein Problem, wenn ich dem Paragraphen einen margin-left in der Breite des Bildes zuweise.
Dies kann ich aber nicht, da ich die Breite des Bildes nicht kenne, denn es sollen beliebige Bilder oder auch garkeines eingebunden werden koennen, wobei der Text dann immer die maximal verfuegbare Breite einnehmen soll.

Gibt es dafuer ueberhaupt eine Loesung? Freu mich ueber jeden Vorschlag.

Viele Grüße
Patrick

--
"Though this be madness, yet there's method in't."
sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zweispaltiger Bereich mit float

    Mssmar
    – Informationen zu den Bewertungsregeln

    Hallo,

    dann tue bitte das Bild in einem Div und den Text auch in einem anderen Div und verwende die CSS für die Positionierung der beiden Divs innerhalb der Container-Div.

    Gruss
    Messmar

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zweispaltiger Bereich mit float

      ShiNtoKu
      – Informationen zu den Bewertungsregeln

      Hallo,

      dann tue bitte das Bild in einem Div und den Text auch in einem anderen Div

      Es bringt leider nichts, die beiden Elemente weiter zu verpacken. Das Problem ist, dass ich den Paragraph nicht positionieren kann, da ich seine Position (den Abstand zum linken Rand des Containers) nicht kenne, denn diese haengt vom Bild ab.
      Der Paragraph soll so formatiert sein, dass es (ihm) egal ist, wie breit das Bild ist bzw. ueberhaupt eines vorhanden ist. Er soll einfach immer die max. verfuegbare Breite minus die Breite des Bildes einnehmen, und dabei Spalten entstehen lassen/nicht um das Bild fliessen.

      und verwende die CSS für die Positionierung der beiden Divs innerhalb der Container-Div.

      Koenntest du bitte weiter ausfuehren, welche Art der Positionierung dir vorschwebt?

      Viele Grüße
      Patrick

      --
      "Though this be madness, yet there's method in't."
      sh:( fo:| ch:? rl:( br:^ n4:( ie:{ mo:) va:} de:> zu:) fl:| js:( ss:| ls:[
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zweispaltiger Bereich mit float

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Es bringt leider nichts, die beiden Elemente weiter zu verpacken. Das Problem ist, dass ich den Paragraph nicht positionieren kann, da ich seine Position (den Abstand zum linken Rand des Containers) nicht kenne, denn diese haengt vom Bild ab.

        Da hast Du völlig recht.
        Ich sehe nur zwei Möglichkeiten:
        1. die Dimensionen des Bildes ermitteln und als margin notieren. Das geht natürlich nicht mit CSS, sondern bedarf server- oder clientseitiger Programmierung.
        2. Eine Tabelle verwenden. Die ist wunderbar flexibel.

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Zweispaltiger Bereich mit float

        Mssmar
        – Informationen zu den Bewertungsregeln

        Hallo,

        Koenntest du bitte weiter ausfuehren, welche Art der Positionierung dir vorschwebt?

        hilft dir das hier.
        Die Eigenschaft: float:....

          
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  
    <title>Spalten</title>  
  
    <style type="text/css" media="screen">  
        .container {  
            margin:4em auto;  
            padding:0 1em;  
            width:30em;  
  
            background:#CCC;  
            border:1px #000 solid;  
        }  
  
        .container img {  
  
            margin-right:1em;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
  <div style="float:left;">  
         <img src="http://src.selfhtml.org/logo.gif" alt="SELFHTML-Logo" />  
        </div>  
  <div style="float:left;width:100%clear:right;padding-left:10px;">  
  
   <p>  
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium  
             doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore  
             veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim  
             ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia  
             consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque  
             porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur,  
             adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et  
             dolore magnam aliquam quaerat voluptatem.  
   </p>  
        </div>  
    </div>  
</body>  
</html>

        Gruß
        Messmar

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. Zweispaltiger Bereich mit float

        Mssmar
        – Informationen zu den Bewertungsregeln

        Hallo,

        Koenntest du bitte weiter ausfuehren, welche Art der Positionierung dir vorschwebt?

        Einen kleinen Fehler, habe ich in meinen Code von vorher:
        nach der Egenschaft "width:100%", sollte ein Simikolone noch rein.
        also:

          
width:100%;

        Gruß
        Messmar

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln