nicht angemeldet
Boxen in CSS zweispaltig anordnen
Liebe Selfer,
ich habe mir für meine Homepage einen kleinen Admin-Bereich gemacht. Das Menü besteht aus fünf Formularen, in denen verschiedene Funktionen gehandhabt werden können. Alles ist in einem großen <div class="admin"> enthalten, was selbst auch wieder eine Box darstellt.
.admin { display: block; margin: 0 auto; text-align: center; }
Jedes Formular wird als Box angezeigt.
form { display: block; width: 45%; border: solid 1px #000000; }
Nun möchte ich, da die Höhe der Boxen unterschiedlich ist, die ersten drei Boxen links, die verbleibenden zwei Boxen rechts haben, so dass ein scheinbar zweispaltiges Layout entsteht. Ich habe schon mit float herumprobiert - vergeblich.
.admin form { float: left; }
.admin form.rechtsbuendig { float: right; }
Was ich erhalte sieht immer so aus:
+----+ +----+
| f1 | | f2 |
| | +----+
+----+ +----+
| f3 |
+----+
+----+ +----+
| f4 | | f5 |
+----+ | |
+----+
Ich hätte aber gerne:
+----+ +----+
| f1 | | f4 |
| | +----+
+----+ +----+
| f2 | | f5 |
+----+ | |
| f3 | +----+
+----+
Wie bekomme ich das hin? Ich verstehe vor allem nicht, wie ich die Reihenfolge in den Griff bekomme. Wer weiß Rat?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Liebe Selfer,
hab's inzwischen selbst gelöst. Ich musste umdenken. Anstatt jedem <form> ein float zu verpassen musste ich die <form>s, die ich links haben will mit einem eigenen <div> umschließen, ebenso die, die ich rechts haben will. Diesen <div>s gebe ich dann float:left bzw. float:right - schon klappt's!
Hätte ich nur schon vorher überlegt, dass man <div>s wie Container verwendet, und hätte ich dann nur diesen einen Schritt weiter gedacht, dass ich ja zwei Container haben will: Box-links(mit drei <form>s) und Box-rechts(mit zwei <form>s)...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hi,
Ich musste umdenken. Anstatt jedem <form> ein float zu verpassen musste ich die <form>s, die ich links haben will mit einem eigenen <div> umschließen
denke noch ein wenig weiteer um: Du kannst form selbst so formatieren - divs dürften unnötig sein.
freundliche Grüße
Ingo-
Hi Ingo,
das mit dem Definieren von <form> habe ich probiert, jedoch ohne Erfolg. Da ich mit einem <div> einen großen Container öffnen kann, in welchen ich mehrere <form>s einschließen kann, ist das wohl die einzig sinnvolle Lösung. Wenn ich das mit den <form>s selbst probiere, dann müsste ich ja die <form>s irgendwie "zusammenschließen", damit daraus dann ein bzw. insgesamt zwei große Container werden. Wie aber soll ich denn den ersten drei <form>s klarmachen, dass sie nicht mit dem vierten und fünften zusammengehören?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hi,
Da ich mit einem <div> einen großen Container öffnen kann, in welchen ich mehrere <form>s einschließen kann, ist das wohl die einzig sinnvolle Lösung.
Da bin ich mir nicht sicher. Deine Eingangsskizze sollte sich auch so umsetzen lassen:
#f1{float:left} - #f4
#f2{clear:left;float:left} - #f3{float:left} - #f5(auch in dieser Reihenfolge im Quelltext notiert und natürlich mit passenden Breitenangaben.
freundliche Grüße
Ingo
-
-
-