tag
kleine frage. ich versuch hier grade ein paar divs anzuordnen und weiss nicht weiter.
also 3 divs untereinander - fertig.
dann sollen 3 oder auch 4 divs rechts neben die drei aber so das wieder oben angefangen wird. ich bräuchte nur die floats und wo man in dem fall ein clear setzen muss.
danke
Dein Versuch sieht bisher wie aus?
sorry vergessen code zu posten. also wenn ich es so mache dann beginnt die 2te bigbox links unter dem news div
[css]
.minilog{
padding: 10px;
border: 1px solid #bababa;
width: 200px;
-moz-border-radius: 5px;
margin-left: 20px;
float: left;
}
.bigbox{
width: 534px;
border: 1px solid #bababa;
-moz-border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
float: left;
}
.bigbox_1{
width: 534px;
border: 1px solid #bababa;
-moz-border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.news{
padding: 10px;
border: 1px solid #bababa;
width: 200px;
-moz-border-radius: 5px;
margin-left: 20px;
margin-top: 10px;
float: left;
}
[/css]
<div class="content">
<!-- bigbox beginn -->
<div class="bigbox">
------------------------ Text
</div>
<!-- end -->
<!-- minilog beginn -->
<div class="minilog">
<div class="titel_r"><b>Login</b></div>
<input class="input_r" type="text" name="login" />
<!-- clear --> <div class="clear"></div> <!-- end -->
<div class="titel_r"><b>Passwort</b></div>
<input class="input_r" type="password" name="password" />
<!-- clear --> <div class="clear"></div> <!-- end -->
</div>
<!-- end -->
<!-- news beginn -->
<div class="news">
--------------------------- Text
</div>
<!-- end -->
<div class="clear"></div>
<!-- bigbox beginn -->
<div class="bigbox">
---------------------------- Text
</div>
<!-- end -->
</div>Ich versteh ehrlich gesagt nicht ganz, wie du deine Boxen jetzt anordnen willst, aber die einfachste Variante ein Zweispaltiges Float-Layout zu machen ist so:
<div id="content">
<div id="box_left">
<p>Füllinhalt</p>
</div>
<div id="box_right">
<p>Füllinhalt2</p>
</div>
<span style="clear:both></span>
</div>#box_left {
float: left;
width: 30%;
}
#box_right {
width: 70%;
margin-left: 30%;
}
Alles das auf die Linke Seite gehört kommt dann in die "box_left" und andersrum. Die Breitenangeaben sind natürlich variabel, relevant ist eigentlich nur dass der margin-left von box_right und die Breite von box-left mindestens gleich gross sind. Boxmodell beachten, der Rahmen spielt auch noch eine Rolle 
Falls du eine bessere Gliederung deines Markups brauchst kannst dua auch mit Position arbeiten, empfiehlt sich aber für einen anfänger nicht unbedingt.
Falls du eine bessere Gliederung deines Markups brauchst kannst dua auch mit Position arbeiten, empfiehlt sich aber für einen anfänger nicht unbedingt.
Für einen Fortgeschrittenen empfiehlt sich das noch viel weniger.
Mit Float arbeiten und die Dinge ansonsten im Fluß lassen.
Positionieren nur da, wo es unbedingt notwendig ist.
Code#box_left { float: left; width: 30%; } #box_right { width: 70%; margin-left: 30%; }
Das ist auch überhaupt keine gute Idee.
Im professionellen Webdesignbereich wird aus gutem Grund praktisch so gut wie nicht mit %-Breiten gearbeitet.
Die Nachteile überwiegen die Vorteile:
Je kleiner der Bildschirm desto schmaler werden die Spalten bis hin zu unschönen Überlappungen, wenn Bilder im Spiel sind.
Bei festen Breiten bekommt man nur einen Scrollbalken, was nach allgemeiner Ansicht das kleinere Übel ist.
...wenn du den ganzen Post gelesen hättest, hättest du gesehen dass die Breiten nur ein Beispiel sind. Es geht nur um die Positionierung der beiden Spalten mit Float und Margin. Natürlich macht eine prozentuale Breite ohne min-width keinen Sinn.
Was die Gliederung angeht kann ich hingegen nicht zustimmen, mittlerweile verfügen wir über die Mittel, die GLiederung im HTML sinnvol zu halten, damit sie auch ohne CSS oder mit einem Screenreader eine logische Abfolge hat und das CSS Design trotzdem genau so zu gestalten wie wir es uns wünschen. Eine Komplexe platzierung nehme ich ehrlich gesagt sehr viel lieber mit Position als mit Float vor.
...wenn du den ganzen Post gelesen hättest, hättest du gesehen dass die Breiten nur ein Beispiel sind. Es geht nur um die Positionierung der beiden Spalten mit Float und Margin. Natürlich macht eine prozentuale Breite ohne min-width keinen Sinn.
doch hab ich!
Der Fragesteller kennt sich nicht so gut aus, ist also offensichtlich Anfänger.
Gerade deshalb ist dein Beispiel mit Float/Margin/Prozentbreiten für ihn nicht so gut geeignet.
Außerdem ist es wg. der Stabilität eines Layouts immer besser, wenn die Spalten einen
gemeinsamen Block Formatting Context bilden, was sie in deinem Fall nicht tun.
Was die Gliederung angeht kann ich hingegen nicht zustimmen, mittlerweile verfügen wir über die Mittel, die GLiederung im HTML sinnvol zu halten, damit sie auch ohne CSS oder mit einem Screenreader eine logische Abfolge hat und das CSS Design trotzdem genau so zu gestalten wie wir es uns wünschen.
äh... ich hab nix von Gliederung gesagt?! 
Klar muss ein Markup auch mit abgeschalteten Gestaltungsanweisungen sinnvoll angeordnet sein, was sonst?!
Eine Komplexe platzierung nehme ich ehrlich gesagt sehr viel lieber mit Position als mit Float vor.
Dann hast du den Float offensichtlich noch nicht so richtig verstanden.
