Es ist ein bisschen schwierig, CSS-Probleme zu beschreiben, aber ich werde mein Bestes geben.
Unter meiner Navigationsleiste habe ich einen Container div. Es ist zu 80% breit.
Im Container div habe ich ein box-wrapper-div, das vier divs enthält, die alle float:left; sind. Sie sind so, dass sie je nach der Größe des Browsers des Benutzers einzeln ablegen können.
Unterhalb des Box-Wrappers befindet sich ein weiteres box-wrapper2-div, das vier Divs enthält, die nicht floated sind.
Sie erscheinen übereinander.
Das Problem ist, dass das box-wrapper2-div aus irgendeinem Grund nach oben und hinter den Box-Wrapper verschoben wird. Ich möchte, dass es unter der oberen Verpackung positioniert wird.
Wie mache ich das?
Hier ist die Seite, von der ich spreche: Ссылка
Wenn Sie Firebug verwenden und den Mauszeiger über das erste div-Element "programDetail" bewegen, können Sie sehen, dass es sich unter dem obigen div befindet.
Danke für jede Hilfe!
Siehe diesen Link für weitere Optionen, um Ihr Problem zu lösen: Ссылка
Option 1.
Ich glaube, Sie können Ihre Container-Divs auf overflow:hidden; setzen, was sie löscht und den zweiten Container nach unten wirft, so dass es keine Überlappung gibt.
Option 2.
Du solltest ein Div unterhalb deiner Floats setzen, das sie löscht. Es gibt mehrere Möglichkeiten, dies zu tun, aber am einfachsten ist es, ein anderes Div unterhalb der Floats mit der CSS clear:both
Randnotiz: Achten Sie darauf, dass Sie Ihrem Clearing-Div auch ein height:0;line-height:0;display:block; geben, um sicherzustellen, dass es keinen flippigen Platz am unteren Rand Ihres Containers hinzufügt
BEARBEITEN: Nachdem diese Frage zuletzt gestellt (und beantwortet) wurde, haben sich neue Wege zur Erreichung des gewünschten Effekts geändert. Eine gängige Praxis ist ein Container-Div mit den folgenden Stilen:
%Vor%Diese Methode wird von gängigen Frameworks verwendet (z. B. - Zurb Foundation und Twitter Bootstrap)