float-Technik

[rarios]

Hallo alle zusammen.
Ich habe ein kleines float-Problem.
Und zwar erzeuge ich jeweils 2 Div's pro Zeile.
Beispiel:

PHP-Code:

{
echo '<div style="float:left; margin-right:20px; text-align:right; width:400px; max-width:400px;">'.$result_2['name'].'</div><div style="margin-left:20px; text-align:left;">&nbsp;'.$result_1[$spalte].'</div>';
} 


Das sieht dann auch folgendermaßen aus: (Angehängte Grafik test1.jpg)

Sobald aber zuviel Inhalt in einer der Div's ist, wird es hässlich: (Angehängte Grafik test2.jpg)


Kennt jemand Abhilfe?
Dankeschön,
Euer rarios

[Indyk]

Hallo rarios,

PHP / MySQL
Feldlänge begrenzen (bestimmt schon selbst darauf gekommen)

HTML / CSS
das attribut overflow:hidden (oder ähnliches) verwenden
es gibt auch möglihckeiten zeilenumbrüche zu verhindern (hab das attribut incht im kopf)

was genau möchtest du denn erreichen? soll es kein umbruch geben? soll es noch hübsch aussehen mit langem text? wie stellst du dir das vor? das der umbruch wie bei einer auflistung eingereiht bleibt?

[reinhardlange]

Moin,

es gibt noch die Möglichkeit in CSS das float-Element aufzuheben:

.text
clear: left; /* oder clear: right; - oder clear: both; */

d.h. das/die nächste(n) Element(e) wird/werden vom float ausgenommen

Damit kann man das Problem u.a. bei Bildern (es fliesst der Text um das Bild), wenn das Bild höher ist, als der Text ... kommt der nächste Text (oder z.B. <hr>) unter das Bild.

... muss man aber mal etwas "ausprobieren" und das Verhalten ansehen.

Gruss Reinhard

[cortex]

warum gibst du dem rechten container keine feste breite?

cx

[rarios]

Das würde an der Tatsache, dass dieser eklige Zeilenumbruch erscheint leider nichts ändern.
Es geht mir einfach darum, dass sobald ein Zeilenumbruch notwendig ist, die 2. (3./4./n.) Zeile unter der 1. anfängt.
Ich werde mich mit Euren Tipps jetzt einmal beschäftigen.

[cortex]

Zitat von rarios

[...] dass sobald ein Zeilenumbruch notwendig ist, die 2. (3./4./n.) Zeile unter der 1. anfängt.

wie gesagt... begrenze die breite der zeile; dabei linken und rechten teil unterscheiden . so könntest du jede zeile in 2 separate container (z.b. div, p) packen.

da es sich um tabellarische daten handelt, könntest du den einsatz einer tabelle erwägen; aus semantischer sicht wäre daran sicher nichts auszusetzen .-

cx

[cortex]

Zitat von rarios

Das würde an der Tatsache, dass dieser eklige Zeilenumbruch erscheint leider nichts ändern

glaub ich nicht. wenn man 2 container hat (den linken und den rechten) und beide floaten (bei dir hat nur der linke die entsprechende eigenschaft) brechen überlange zeilen nicht aus dem container heraus.

cx

[rarios]

mhm das klingt nett, ich werde es ausprobieren.

Ich hab dieses Thema Tabelle oder Div langsam satt ;-) ,
manchmal denke ich, dass eine Tabelle wirklich oft hilfreicher ist als Div's und trotzdem meide ich sie.

[Chance]

CSS ist Fummelage ^^ :D .
Einfach, aber doch kompliziert...

Wenn jemand mal lust hat, auf meiner HP wurde mit Hilfe von negativen margins ein Content vor Seitenboxen im Quellcode erzielt.


Es hat eigentlich, wie cortex bereits geschrieben hat, nur ein float:left; und width:400px; für die rechte Seite gefehlt:

PHP-Code:

<div style="float:left; margin-right:20px; text-align:right; width:400px; max-width:400px;">Test 1</div><div style="margin-left:20px; text-align:left;width:400px;float:left;">&nbsp;Test2</div>
<div style="float:left; margin-right:20px; text-align:right; width:400px; max-width:400px;">Test 3</div><div style="margin-left:20px; text-align:left;width:400px;float:left;">&nbsp;

ed 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. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

</div>

<div style="float:left; margin-right:20px; text-align:right; width:400px; max-width:400px;">Test 4</div><div style="margin-left:20px; text-align:left;width:400px;float:left;">&nbsp;Test5</div> 


[cortex]

Zitat von rarios

manchmal denke ich, dass eine Tabelle wirklich oft hilfreicher ist als Div's und trotzdem meide ich sie.

jede technik hat ihre daseinsberechtigung: tabellen für das layout einer website missbrauchen...? nein. mit divs tabellarische strukturen nachbauen...? nein.

eigentlich ganz einfach .-

cx