Festsitzenderblock

Guten Tag,

ich bräuchte da mal Hilfe.

Ich bin gerade etwas zu blöd dafür:

Ich habe in einem Interface eine sidebar und eine Footer.

Ich möchte gerne das der Footer nur bis zum Rand der Sidebar geht und nicht darüber hinaus. (Ohne width und left etc.)

Also das ich beim Footer mit 100% Width genau an den Rand der Sidebar komme wie bereits gesagt ohne darüber hinaus.

Was ich mit darüber hinaus meine:

[Blockierte Grafik: https://abload.de/img/festsitzendzxilv.png]

Man sieht die Sidebar (Schwarz) und den Footer (Türkis) - man sieht das dieser über die Sidebar geht.

Jedoch möchte ich mit 100% width erreichen das der Footer nur bis hier geht:

[Blockierte Grafik: https://abload.de/img/festsitzend2a1f0c.png]

Also wie bereits gesagt ohne vmit left und right etc zu arbeiten.

Es sollte halt auch schon dann auf jedem Display so sein.

mein Footer Code:

<footer class="site-footer">
      <div class="text-center">
        <p>
          Copyright
        </p>
        <div class="credits">
          Fooooooootteeeeer
        </div>
        <a href="#" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>

CSS dazu:

.site-footer {
    bottom: 0%;
    position: absolute;
    text-align: center;
    width: 100%;
    background: #4ECDC4;
    color: #fff;
    padding: 15px 0;
}

Eventuell kann ja jemand helfen

Liebe Grüße

CuzImCloud (Ja meine Zeichnungen sind scheiße ^.^)

Ahhh - Habs dann auch hinbekommen

// edit

Habe da doch noch ein kleines Problem:

Es ist so das wenn ich Postion Absolute mache das ich mittels Slider die Seite nach Rechts schieben kann bei "width: 100%"

Wenn ich position: relative mache ist der Footer immer oben.

Ich möchte gerne das der Footer immer unten ist und auch am Monitor Rand aufhört und nicht weiter geht:

was ich damit meine:

[Blockierte Grafik: https://abload.de/img/neuh8e7u.png]

Man sieht das ich das ganze Ding nach Rechts schieben kann.

Ich habe schon viel gesucht und getestet, aber nix hat geholfen.

Jemand eine Idee?

Gruß

Das klappt leider auch nicht "so" gut.

Es ist zwar unten. Aber der Text ist nicht mittig auch nicht mit align center und wenn ich das Browser Fenster verkleiner:

[Blockierte Grafik: https://abload.de/img/mittefudj2.png]

Ist der in der Mitte der Seite.

Kann ja auch sein das ich es komplett falsch gemacht habe:

Von dieser Seite habe ich das ganze:

https://philipwalton.github.io…xbox/demos/sticky-footer/

Es ist ein Gedownloadetes Design

https://templatemag.com/dashio-bootstrap-admin-template/