CSS Boxen nebeneinander anordnen
Hin und wieder taucht das Problem auf, dass man auf der Internetseite Inhalte nebeneinander stellen möchte.
Mit Tabellen ist das kein Problem, aber Tabellen sind ja „out“, weil dafür nicht gedacht.
Eigentlich stimmt das auch nicht, sie sind für Inhalte sehr wohl gedacht, aber nicht für das Positionieren von Gestaltungselementen.
Wie dem auch sei, bei der Problemstellung ging es darum, anstelle einer Tabelle eine Lösung aus 4 Boxen zu erstellen, die nebeneinander und in gleich Breite, dynamisch zur Bildschirmgröße erscheinen sollten. Da das in einem bestehenden Wiki benötigt wurde und es hier auf die Lösung des eigentlichen Problems und nicht um Konventionen, wie Auslagerung usw. ankam, bot es sich an diese Lösung direkt auch hier einzubringen.
Hinweis:
– den Wert min-height:300px; sollte man entweder weglassen oder auf die eigenen Bedürfnisse anpassen.
– [[]] sind Links im Wiki
[html]
<div style="float:left;width:21%;min-height:300px;padding:10px;border:1px dotted black;background-color:silver;">
[[Testbericht| Testbericht für Betriebe TB]]<br>
[[Monatliche Zusammenfassung|Monatliche Zusammenfassung MZ]]<br>
[[Highlights]]<br>
[[Umgebung 1]]<br>
[[Umgebung 2]]<br>
[[Umgebung 3|Umgebung 3]]<br>
[[Umgebung 4]]<br>
</div>
<div style="float:left;margin-left:2%;width:21%;min-height:300px;padding:10px;border:1px dotted black;background-color:lightgrey;">
[[Umgebung 5|Umgebung 5]]<br>
[[Umgebung 6|Umgebung 6]]<br>
</div>
<div style="float:left;margin-left:2%;width:21%;min-height:300px;padding:10px;border:1px dotted black;background-color:#f3f3f3;">
[[Umgebung 5|Umgebung 5]]<br>
[[Umgebung 6|Umgebung 6]]<br>
</div>
<div style="float:left;margin-left:2%;width:21%;min-height:300px;padding:10px;border:1px dotted black;background-color:#fafafa;">
[[Umgebung 5|Umgebung 5]]<br>
[[Umgebung 6|Umgebung 6]]<br>
</div>
<br style="clear:both" />
[/html]