zwei DIV Container nebeneinander und zentriert

  • Hallo,
    Ich habe da eine kleine Herausforderung an der ich im Moment mir die Zähne ausbeisse.


    Ich habe einen DIV Container Header. In diesem sind zwei weitere Container die jeweils ein Bild beinhalten.
    Diese beiden Bilder sollen nun auf der Seite zentriert werden und sich genau aneinander reihen.
    Hier mal mein Code bis jetzt:



    und Hier mein CSS dazu:



    Über Hilfe wäre ich dankbar Gruss EWSG

  • vllt wäre eine bildlische Vorstellung nicht schlecht, da bei mir wenn ich die beiden scripte zsmn stecke diese beiden Container nebeneineander sind :S


    ausserdem hast du einen Fehler in deinem CSS:


    CSS
    1. #heder {
    2. padding: 0px;
    3. margin: 0px auto;
    4. }


    das müsste ein


    CSS
    1. #header {
    2. padding: 0px;
    3. margin: 0px auto;
    4. }


    sein :D

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von flo96 ()

  • Es ist tatsächlich schwierig sich vorzustellen was genau du möchtest, hier aber mal ein Ansatz:


    Wenn du zentrieren willst ist es sinnvoll alles in einen Container zu stecken der dann auch zentriert wird, zum verdeutlichen habe ich mal einen div-container namens container erstellt, es ist jedoch auch möglich einfach den body-tag dafür zu nutzen.


    Versuchst du mit margin: 0 auto; zu zentrieren, musst du dem Container eine Breite zuweisen, ansonsten nimmt er (Blockelement) 100% des verfügbaren Platzes als Breite und die darin befindlichen Elemente rutschen nach links an die Seite.


    In meinem Beispiel ging ich davon aus das du den Inhalt nun auch zentriert und unter dem header haben möchtest und das die Navigation (welche ich in eine Liste umgewandelt habe) im div-container #Links Platz finden soll, ist dies nicht der Fall melde dich bitte erneut und teile uns mit wo genau die Elemente sitzen sollen.


    Anmerkung: Ganz oben im CSS-Code setze ich die Abstände der verwendeten Elemente (div, ul, li) auf 0, das ist praktisch da man die Abstände nun selbst bestimmen kann ohne seltsame Lücken im Layout zu erhalten.