Tabelle rechts von Div-Containern platzieren

Computer: Software & Programmierung HTML & CSS
1

Hallo zusammen,

dieser Code hier ist Bestandteil eines Programms, mit dem Ausgaben im Haushalt erfasst werden und in tabellarischer Form dargestellt werden soll.

 Ausgaben 
Miete
...
...
 


 
 Fälligkeit 
12
...
...
...
 

 
 ZW 
12
...
...
 

 
 Euro

Dieser Block folgt noch weitere drei mal. Die
dienen dazu die Blöcke untereinander zu setzen. Zusätzlich möchte ich noch eine Tabelle rechts neben den Blöcken einbinden. Und da habe ich Probleme mit der Positionierung. Der Code für die Abfrage lautet wie folgt.

 Übersicht 
<?php $ausgaben=$mysqli->query("SELECT ausgaben, falligkeit, zw, euro FROM haushaltsausgaben WHERE id\_vn='{$\_SESSION['kundenauswahl']}';");
while($ausgabenfeld=$ausgaben-\>fetch\_array())
{
echo ''.
''.$ausgabenfeld['ausgaben'].''.
''.$ausgabenfeld['falligkeit'].''.
''.$ausgabenfeld['zw'].''.
''.$ausgabenfeld['euro'].''.
'';
}
?\>

Wie kann ich rechts neben den Blöcken diese Tabelle einbinden, sodass die Oberkante der Tabelle mit der Oberkante des ersten Blocks nebeneinander liegen?

Gruß und Dank

2

Moin,

Wie kann ich rechts neben den Blöcken diese Tabelle einbinden,
sodass die Oberkante der Tabelle mit der Oberkante des ersten
Blocks nebeneinander liegen?

Indem Du beide Block-Elemente (-> nachschlagen, wichtiger Begriff!) im Quellcode nacheinander kommen lässt und mindestens dem einen (idR dem ersten) ein entsprechendes float zuweist (ich habe gesehen, dass Du das schonmal gemacht hast). Wenn Du nachgelesen hast, was Block-Elemente sind und wie sie sich verhalten, dann weißt Du, warum die nicht nebeneinander stehen und wozu Du das float brauchst.

Freundliche Grüße,
-Efchen

3

Geschafft, aber…
Hallo nochmal,

ich habe die Container inkl. Tabelle nebeneinander bekommen.

Die ersten fünf gefloateten Container (der fünfte umfasst die Tabelle) sind nebeneinander. Damit dann eine zweite Zeile beginnen kann habe ich ich ein

hinterlegt und dann weitere vier Container gefloatet. Dann wieder ein clear:left und wieder vier Container.

Soweit geht das auch, aber wenn die Tabelle in der ersten Zeile nach unten anwächst, verschieben sich die unteren Zeilen entsprechend.

Wie kann ich das verhindern?

Gruß

4

Tach!

Das geht, indem Du alle Elemente, die neben der Tabelle stehen sollen, zu einer Gruppe[*] zusammenfasst.

Grüße,
-Efchen

[*] Welches Element in HTML definiert eine Gruppe?

5

Du meinst wahrscheinlich div und span.

Ich hab’s jetzt aber anders lösen können. Und zwar habe ich die Tabelle mit float:right von rechts her positionieren können. Damit der Abstand zu den Containern links nicht zu groß ist, habe ich noch margin-right verwendet. Die Container auf der linken Seite werden auch nicht mehr von der Größe der Tabelle beeinflusst.

Danke!

6

Tach,

Du meinst wahrscheinlich div und span.

Jein. ist richtig. Das Element definiert eine logische Gruppe.
Dieser Gruppe kann man dann als Ganzes auch ein float zuweisen.

Ich hab’s jetzt aber anders lösen können. Und zwar habe ich
die Tabelle mit float:right von rechts her positionieren
können.

Das ist ja das selbe quasi in Grün :wink:

Die Frage ist dabei ja nur, welche Inhalte am Ende unter dem anderen Element umfließen oder ob man noch ein HTML-Element mehr braucht.

Damit der Abstand zu den Containern links nicht zu
groß ist, habe ich noch margin-right verwendet.

Das ist so voll in Ordnung.
Dann umfließt am Ende auch nichts.

Die Container
auf der linken Seite werden auch nicht mehr von der Größe der
Tabelle beeinflusst.

Nein, weil die Tabelle jetzt nicht mehr im Textfluss liegt, weil Du sie floatest. Nur Elemente im normalen Textfluss beeinflussen andere Elemente.

Danke!

Gerne!

Grüße,
-Efchen