Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Div Layer nebeneinander in CSS???





Frage

Servus! Ich brauch mal eure Hilfe in Sachen CSS... ich will ne Page machen und habe eine CSS Datei für verschiedene Layer. [b].main[/b] ist der Hauptlayer für die Homepage (zentriert, mit Abstand nach oben) der alles enthält. Darin ist ein[b] .container[/b] der im groben nur als Angabe hat 10px Rand zu lassen und den Inhalt enthält. Oben ist der Header und das Menü. Soweit hat alles geklappt! Jetzt zum Inhalt: Ich möchte in diesem Layer [b].container[/b] einen Layer [b].content [/b]der den Text enthält und daneben einen Layer [b].sidebar [/b]der zusätzliche Links und eine Suchfunktion enthält. Also wie gesagt NEBENEINANDER! Nur genau das nebeneinander bekomme ich nicht hin...die Layer werden immer untereinander angebracht. Was mache ich falsch??? [code] .main { background: #FFF; border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF; margin: 20px auto 4px auto; text-align: justify; width: 770px; } .container { margin: 10px; } .content { background: #F5F5F5; border-top: 1px solid #E5E5E5; clear: both; width: 470px; } .sidebar { width: 290px; background: #dddddd; border-right: 1px solid #BBB; float: right; text-align: left; clear: both; }[/code]

Antwort 1 von rfb

mit
clear:both
in beiden DIVs beendest du das floating, bevor es begonnen hat.

Antwort 2 von JokamitPAge

...hey! wie muss ich das floating denn sonst einstellen? Wenn ich beide raus nehme habe ich nicht viel Veränderung Die Sidebar ist zwar rechts ausgerichtet, der Content Layer startet aber erst, wenn der Sidebarlayer zu ende ist.

Also oben ist rechts= Sidebar lings=leer und weiter unten ist dann links=Content rechts=leer und nicht wie es sein sollte Content und Sidebar nebeneinander.

DAnke für eure Tipps! Ihr seid wirklich großartig!

me

Antwort 3 von rfb

nochmals:
du hast in den beiden DIVs, die du floaten willst, jeweils die Eigenschaft
clear:both
, also die Anweisung, das floaten zu beenden. Nur in sidebar startest du das floaten überhaupt einmal.
Schmeiß erst einmal beide
clear:both
raus, die haben da nix zu suchen! Dafür solltest du dem content-DIV ebenfals die floating-Eigenschaft geben.
Wenn du floating beenden willst, dann nach den beiden DIVs!

Du machst keine Angaben zu
border-with
und vor allem
margin
, also gelten irgendwelche Default-Werte. Zusammen mit der Breite der beiden DIVs kann das einen größeren Wert ergeben als die Breite des main-DIVs. Beachte dass der IE sich hierbei auch noch verrechnet, wenn du ihn in den Quirksmodus schickst (IE6/7. IE 5 verrechnet sich grundsätzlich). Weiteres hierzu findest du unter dem Stichwort Das Boxmodell.

Antwort 4 von achTinchen

Hallo! =)

Du brauchst wirklich nur die beiden Zeilen mit "clear:both;" herauslöschen.

Rein rechnerisch ist mir noch aufgefallen: Du hast für den main-Layer 770px Breite genommen. Für content 470px und für die sidebar 290px. Ergibt 760px, bleiben 10px über. Beim container-Layer hast du ja einen Rand von 10 px eingestellt. Allerdings ist der ja auf beiden Seiten (und natürlich auch oben und unten) also gehen eigentlich 20px dafür drauf.

Lg Tinchen