Zweispaltiges Problem ...

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zweispaltiges Problem ...

    So langsam ist es zum Mäusemelken.

    Ausgangslage ist folgendes Skript:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body style="margin:20px; padding:0">
    
    <div style="width:418px; background:#CCC">
    	<div style="background:#EEE; width:398px; float:left">
    		<div style="padding:8px">
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br />
    			sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br />
    			magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br />
    			quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut<br />
    			aliquip ex ea commodo consequat. Duis autem vel eum iriure<br />
    			dolor in hendrerit in vulputate velit esse molestie consequat, vel<br />
    			illum dolore eu feugiat nulla facilisis at vero eros et accumsan et<br />
    			iusto odio dignissim qui blandit praesent luptatum zzril delenit<br />
    			augue duis dolore te feugait nulla facilisi.
    		</div>
    	</div>
    	<div style="background:transparent; width:20px; float:right">
    		<img src="anzeige.gif" width="20" height="110" alt="" />
    	</div>
    </div>
    	
    </body>
    </html>
    Beim Ausprobieren wird man erkennen, dass es ein kleines zweispaltiges Layout ist. Die rechte Spalte soll sich von der Höhe her an der linken orientieren und dabei einen dunklen Grauton als Hintergrundfarbe haben. Im IE wird es korrekt angezeigt (unglaublich, aber wahr), im Mozilla und Firefox nicht. Wo liegt da der Fehler?

    Die Datei "anzeige.gif" ist ein hochformatiges GIF, welches die Hintergrundfarbe #CCC hat. Der gesamte Container hat #CCC als Hintergrundfarbe. Wie oben schon gesagt: Im IE geht's, in anderen nicht.

    Danke im Voraus

    Innuendo

  • #2
    Re: Zweispaltiges Problem ...

    probier's mal "andersherum": div mit dem bild nach oben, rechts floaten lassen.
    div mit dem textinhalt überhaupt kein float und keine breite, dafür aber ein entsprechendes margin-right.
    und der extra-div, um den text mit 8px padding zu versehen, ist auch überflüssig (es sei denn, damit hast du noch was anderes vor).
    btw, wenn ich es mir genau überlege, ist der div um's bild auch überflüssig, also wech damit :-)

    Code:
    <div style="width:418px; background:#CCC;">
    <img style="float:right;" src="anzeige.gif" width="20" height="110" alt="" />
    <div style="background:#EEE;margin-right:20px;padding:8px;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br />
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br />
    magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br />
    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut<br />
    aliquip ex ea commodo consequat. Duis autem vel eum iriure<br />
    dolor in hendrerit in vulputate velit esse molestie consequat, vel<br />
    illum dolore eu feugiat nulla facilisis at vero eros et accumsan et<br />
    iusto odio dignissim qui blandit praesent luptatum zzril delenit<br />
    augue duis dolore te feugait nulla facilisi.
    </div>
    </div>
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Habe es anders gelöst. Aber danke trotzdem.

      Kommentar

      Lädt...
      X