Probleme mit Float und Box-Rand "geht" nicht mit

[Nucleus]

Hallo!

Ich versuche für mein Homepage-Projekt gerade eine Seite mit einem Inhaltsverzeichnis zu designen.
Dafür habe ich 2 divs (id basics und specials) erstellt, die jeweils eine Überschrift und eine (verschachtelte) Liste enthalten und nebeneinander stehen sollen. Die beiden divs sind Teil einer übergeordneten div content, die wiederum der div main untergeordnet ist. Content enthält basics und specials und bildet um die beiden links und rechts einen Rahmen, main zeigt sich für die Hintergrundfarbe verantwortlich, in die content eingebettet ist.
Mein Problem ist nun: Setze ich für basics und specials width auf jeweils 49% und lasse basics nach links floaten, gesellt sich specials nicht rechts neben basics, sondern bleibt unterhalb davon. Lösche ich die width-Angabe für specials, funktioniert es, wenn es auch hässlich aussieht, weil die lis von specials verschoben sind, sodass über- und untergeordnete lis auf gleicher höhe stehen. Als ich mit Firebug untersuchte, welchen Platz die divs basics und specials dann auf der Seite einnahmen, sah ich, dass basics die vorgesehenen 49% von content einnahm, und das von links nach rechts, bis specials anfängt. Für specials zeigte mir Firebug hingegen an, dass die Box von links nach rechts den ganzen Platz von content einnimmt und mit basics komplett überlappt. Das ist dann wohl auch der Grund dafür, dass es nicht klappt, wenn ich für specials eine width von 49% einstelle. Woran liegt das?
Ich hatte Probleme in der Richtung, dass Boxen Platz anders nutzen, als ich intuitiv annehmen würde schon öfters in meiner noch kurzen Erfahrung im Webdesign ;) Bisweilen kann ichs gar nicht nachvollziehen...

Stelle ich für specials zusätzlich noch float right ein, funktioniert es, auch wenn ich bei beiden divs width 49% einstelle. Allerdings "gehen" dann weder der Rahmen von content noch der background von main mit den beiden divs basics und specials mit, die Listen schauen quasi nackt nach unten raus und border und background bleiben oberhalb der Überschriften von basics und specials hängen. Das, obwohl die beiden divs ja innerhalb von content und main liegen...Mir wachsen damit noch graue Haare ;) Und es verwirrt mich ziemlich. Weiß jemand, worin der Grund für das liegt, was ich da beobachte? Ich müsste für content eine feste height angeben, damit border und background auch mitgehen...Hier mal ein Link auf die Seite:

http://www.maybegeek.de/~hep62703-css2011/1bobvz1

So, das ist jetzt eine ganz schöne Menge...Ich würde mich sehr freuen, wenn mir jemand weiterhelfen könnte, und schon mal ein großes Dankeschön im Voraus!

Leider weiß ich nicht, wie ich HTML- und CSS-Code anständig und übersichtlich in den Post einbinden kann :/

Nucleus

 

[Marv]

Hi,

ich kann dir zwar auch nicht genau erklären warum float gewisse, nicht nachvollziehbare Auswirkungen mit sich bringt, aber grundlegend:

Damit das floaten von zwei Elementen richtig funktioniert, muss erstmal genügend platz vorhanden sein: Mit jeweils 49% Breite hast du das also schonmal erfüllt.
Zweitens, und das hast du auch schon festgestellt, müssen beide Container die angabe "float" bekommen. Funktioniert mit float: left, wie auch mit float:right.

Je nachdem wie man float:right und float:left kombiniert ändert sich auch mal die Position / angezeigte Reihenfolge der Elemente im Browser.
Am meisten findet man wohl "float:left / float:left" oder "float:left / float:right" (jeweils linker und rechter Container) – als Kombinationen.

Wenn du zwei Container gefloatet hast, wächst dann aber der äußere Container nicht mehr mit. Das ist ungefähr wie bei dem Problem, als du nur einen Container gefloatet hattest, das der eine den anderen überlappt hast – Also spielen die Container sozusagen nicht mehr richtig miteinander :) .

Die Lösung ist, nach den beiden floatenden Elementen, ein Element zu setzen, das die Fehler, die durch floaten entstehen, unterbricht.
Das geht mit der CSS eigenschaft "clear:both;" Setze also mal einen Container mit dieser Eigenschaft in den Div Content nach dem Div Specials.
Das sähe dann ungefähr so aus: der entsprechende Container, den du einfügen musst ist "<div style="clear:both;"></div>"

<div id="content">

    <div id="basics"></div>
    <div id="specials"></div>

    <div style="clear:both;"></div>

</div>

Der Div mit dem clear:both; sagt dann: So ihr habt ja jetzt schon gefloatet, hier ist aber Ende, und der Content-Div wächst wieder brav mit und du siehst links und rechts auch den Rand wieder vollständig.

Code fügst du übrigens ein, indem du den Code zwischen die beiden Tags setzt: [NOPARSE]

 Hier Dein Code

[/NOPARSE]

 

[janm]

Code fügst du übrigens ein, indem du den Code zwischen die beiden Tags setzt: [NOPARSE]

 Hier Dein Code

[/NOPARSE]

Ja das das stimmt, aber für HTML gibt es [NOPARSE]

und für PHP gibt es

[/NOPARSE]
siehe:
Code: http://www.html.de/misc.php?do=bbcode#code
PHP-Code: http://www.html.de/misc.php?do=bbcode#php
HTML-Code: http://www.html.de/misc.php?do=bbcode#html

 

[Nucleus]

Danke für deine Hilfe, jetzt klappts! Und wieder einen Schritt weiter :)