Gunther: Div-Boxen nebeneinander

Beitrag lesen

Hallo Jan Niklas!

Ich wollte mal wissen ob es eine Möglichkeit gibt, div-Boxen nebeneinander anzuordnen ohne ein "margin-left" plus "float:left"??

Also meine linke div-box hat eine breite von 10 em und einen border von 1px. die rechte div box soll 10px Abstand zur linken haben und besitzt auch einen 1px border. Sie soll den Rest des Bildschirms bekommen.

Bei deinen gewünschten Breitenangaben und Abstandsgrößen ist die Methode der Wahl doch genau die von dir beschriebene, wobei du jeweils in DIV 1 und 2 noch ein weiteres DIV Element verschachteln solltest, denen du dann die gewünschten Werte für die margins und borders verpasst.

Möglichkeit A:
DIV 1 left floaten mit einer width von 10em und DIV 2 mit width:auto und einem margin-left:10em (wobei ich eher einen Wert etwas größer als 10em nehmen würde, um Probleme durch Rundungsfehler zu vermeiden, bspw. 10.1em)

┌-----------------------------------┐
 |    DIV 1             DIV 2        |
 |┌------------┐┌-------------------┐|
 ||float:left  ||width:auto         ||
 ||width:10em  ||margin-left:10em   ||
 ||            ||                   ||
 ||            ||                   ||
 |                                   |
 |                                   |
 |                                   |
 └-----------------------------------┘

Andere Möglichkeiten wären z.B. beide DIVs (left/right) floaten zu lassen. Eingeschlossen in ein Wrapper DIV mit bspw. width:100% bekäme DIV 1 dann eine width von 20% und DIV 2 80%.

Oder du verwendest die display Eigenschaft mit den Werten table, table-row und table-cell. Diese Möglichkeit funktioniert aber nicht in den IEs Win/Mac.

Oder es bestünde theoretisch die Möglichkeit DIV 1 bspw. absolut zu positionieren (wovon ich allerdings abraten würde!).

Oder, oder, oder ..., dem Einfallsreichtum und den Kombinationsmöglichkeiten sind kaum Grenzen gesetzt. Es kommt halt immer auch auf den konkreten Anwendungsfall an, welche Methode man am besten wählt. Wie eingangs bereits erwähnt, halte ich Möglichkeit A in deinem Fall wohl für die beste.

Gruß Gunther