oxo888oxo: Footer mit 2 Spalten / eine links und eine rechts ausgerichtet

Hallo

Ich möchte für meine Website im Footer gerne 2 Spalten haben.
Links soll linksbüdig meine Adresse usw. stehen.
Rechts sollen rechtsbündig 3 kleine Grafiken nebeneinander sein.

Das ganze soll sich dann sozusagen auch noch responsive verhalten.
D.h. per Media Queries möchte ich, dass sich bei Unterschreitung einer bestimmten Viewport-Breite folgedes ergibt:

Links soll linksbüdig meine Adresse usw. stehen.
Darunter sollen linksbündig 3 kleine Grafiken nebeneinander sein.

Ich habe das jetzt mal so begonnen:

<footer>  
  
  <span class="footer-infos">  
    Adresse Zeile 1<br>  
    Adresse Zeile 2<br>  
    Adresse Zeile 3<br>  
    Adresse Zeile 4<br>  
    Adresse Zeile 5<br>  
  </span>  
  
  <span class="footer-grafiken">  
    <img src="grafik-1.jpg">  
    <img src="grafik-2.jpg">  
    <img src="grafik-3.jpg">  
  </span>  
  
</footer>

Das dazugehörige CSS:

.footer-infos {  
float: left;  
}  
  
.footer-grafiken {  
float: right  
}

Ist das soweit erstmal richtig überlegt von mir?

Und wenn ja, wie bekomme ich es denn jetzt hin, dass bei Unterschreitung einer bestimmten Viewport-Breite die 3 Grafiken linksbündig werden.

Gruß
Ingo

  1. Hallo

    irgendwie verwechselst du da was. float hat nichts mit links- oder rechtsbündig zu tun.

    Gruss

    MrMurphy

    1. irgendwie verwechselst du da was. float hat nichts mit links- oder rechtsbündig zu tun.

      Ja OK; das stimmt natürlich.
      Das ist mir im Grunde auch klar (glaube ich jedenfalls).
      Aber es funktioniert ja, darum, dachte ich, das sei der richtige Weg.

      Womit muss ich mich denn stattdessen befassen, um mein Anliegen so zu lösen, wie sich das gehört?

      1. Hallo

        Die Adresse würde ich in eine Liste packen und die Bilder in ein figure-Element.

        Die Ausrichtung und das Responsive Design erfolgen dann über flexbox:

        http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_31_oxo888oxo_01_footer_ausrichten.html

        Gruss

        MrMurphy

  2. Hi,

    Und wenn ja, wie bekomme ich es denn jetzt hin, dass bei Unterschreitung einer bestimmten Viewport-Breite die 3 Grafiken linksbündig werden.

    Na hebe das floating halt wieder auf, und füge ggf. andere Eigenschaften hinzu (das könnte z.B. display:block sein, um beide span-Elemente dazu zu bringen, untereinander zu stehen).

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Na hebe das floating halt wieder auf, und füge ggf. andere Eigenschaften hinzu (das könnte z.B. display:block sein, um beide span-Elemente dazu zu bringen, untereinander zu stehen).

      Stimmt, das ist ja ganz einfach.
      Da hätte ich ja auch mal selber drauf kommen können :-)

      Ich brauch es ja nur mit den beiden Floats zu machen, wie in meinem Ursprungs-Posting.
      Und für die kleineren Viewports nehme ich beie Floats wieder raus und schon stehen der Adress-Block und der Grafik-Block ja wieder untereinander auf der linken Seite.
      Da ist ja nicht mal ein display:block erforderlich.

      Das ist dann ja deutlich weniger aufwendig als die Methode, die MrMurphy vorgeschlagen hatte.
      Ist es denn OK, wenn ich einfach mit den beiden Floats löse?
      Oder ist das im Grunde böses Gemurkse und hat irgendwelche Nachteile?

    2. @@ChrisB:

      nuqneH

      Na hebe das floating halt wieder auf

      Andersrum. Füge das floating erst für größere Viewports hinzu. Mobile first.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)