Footer mit 2 Spalten / eine links und eine rechts ausgerichtet

[oxo888oxo]

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

[MrMurphy]

Hallo

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

Gruss

MrMurphy

[oxo888oxo]

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?

[MrMurphy]

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

[ChrisB]

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

[oxo888oxo]

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?

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Na hebe das floating halt wieder auf

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

Qapla'