nicht angemeldet
Fehlender automatischer Textumbruch innerhalb von float:left
Hallo,
ich komme mit einem Problem nicht weiter und hoffe auf eure Hilfe. Ich habe ein dreispaltiges Layout, bei dem der Text in der mittleren Spalte nicht umgebrochen wird und daher der komplette div-Container verschoben wird. Ich habe ein kurzes Beispiel geschrieben, das das Problem darstellt:
html>
<head>
<title>Testseite</title>
</head>
<body style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; ">
<div style="width: 575px; height: 214px; color: black; background-color: #dddddd; ">
<div style="float: left; background-color: #777777; ">
YYYYYYYYY
</div>
<div style="float: left; padding-left: 10px; padding-right: 10px; background-color: #aaaaaa; ">
<div>
UEBERSCHRIFT UEBERSCHRIFT UEBERSCHRIFT<!--<br>-->
UEBERSCHRIFT UEBERSCHRIFT UEBERSCHRIFT
</div>
<div>
Text Text Text Text Text Text Text<!--<br>-->
Text Text Text Text Text Text Text
</div>
</div>
<div style="float: right; background-color: #999999; ">
XXXXXXX
</div>
</div>
</body>
</html>
Wenn ich die zwei <br>s entkommentiere, sieht es so aus wie ich will.
Ich habe auch schon versucht, den mittleren Teil ohne float ans Ende zu stellen, dann wird aber das Padding nicht richtig berücksichtigt (geht vom ganz linken Rand aus, nicht vom rechten Rand des ersten divs) und der Text fliesst auch unterhalb der anderen Container.
Ich kann für die inneren Elemente leider auch keine festen Höhen und Breiten angeben, da alle Elemente aus einer Datenbank kommen und rechts und links eigentlich Bilder dargestellt werden, die keine feste Breite haben. Auch das feste Formatieren des Textes in der Mitte geht daher leider nicht.
Das ganze soll übrigens als Teaser in ein größeres Layout eingebaut werden.
Vielen Dank für eure Hilfe.
-
Ahoi Michael Borschel,
die einzigste möglichkeit die mir auf die schnelle einfällt ist dme Mittleren Div ne feste breit zu geben.
<div style="float: left; padding-left: 10px; padding-right: 10px; background-color: #aaaaaa;
width:150px;">oder so
MfG
-
Hallo Daniel,
das klappt leider auch nicht :-(
-
Ahoi Michael Borschel,
die einzigste möglichkeit die mir auf die schnelle einfällt ist dme Mittleren Div ne feste breit zu geben.
<div style="float: left; padding-left: 10px; padding-right: 10px; background-color: #aaaaaa;
width:150px;">oder so
MfG
Sorry es geht doch, danke für die Hilfe. Jetzt muss ich zwar noch die verbleibende Breite für den Content berechnen, aber das ist ein anderes Thema.
Michael
-
Ahoi Michael,
du solltest dich unbedingt nochmal mit den floats beschäftigen. Vor allem unter dem Stichwort shrink-to-fit nachlesen!
Ansonsten wirst du noch öfter unliebsame Überraschungen erleben.
Gruß Gunther
-
-