Responsive: Floatverhalten von 3 Spalten bei kleineren Bildschirmen

herrweiss · #1 (**permalink**) 10.09.2014, 15:23

Hallo zusammen,

Hallo,

ich habe ein Problem bei der Responsive Anpassung eines 3 Spalten Layouts (Holy Grail). Die Spalten sind wie folgt aufgeteilt:

HTML-Code:

<div class="container">
   <div id="main"></div>
   <aside id="left"></div>
   <aside id="right"></div>
</div>

Bei einer verkleinerten Fensteransicht soll die linke Spalte (#left) unter die Hauptspalte (#main) rutschen und die rechte Spalte soll weiterhin nach rechts floaten. Und nun zu meinem Problem: Die rechte Spalte orientiert sich leider an der linken Spalte, welche nun unter der Hauptspalte (#main) angezeigt wird und wird erst auf der Höhe der linken Spalte gefloatet und nicht auf der Höhe der Hauptpalte (#main). Dieses Verhalten leuchtet mir auch ein, aber ich habe keine Idee wie ich das nur mit CSS beeinflussen kann.

Damit es klarer wird, was ich meine, habe ich hier eine Beispielskizze angehängt: beispiel_spalten.jpg

Mein CSS Code:

HTML-Code:

@media (max-width: 768px) {

#main,
#left,
#right {
float: none;
position: relative;
margin-right:0;
margin-left:0;
left:0;
right:0;
box-sizing: border-box;
}

#main,
#left {
width: 70%;
float: left;
}

#right {
float:right;
width: 30%;
}

}

Hat jemand eine Idee wie ich das Problem lösen könnte?

MrMurphy · #2 (**permalink**) 10.09.2014, 15:49

Soll das ganze auch im IE8 und IE9 funktionieren?

herrweiss · #3 (**permalink**) 10.09.2014, 15:56

In erster Linie geht es um die Darstellung auf Tablets... IE8 und IE9 müssen nicht zwingend berücksichtigt werden.

etux · #4 (**permalink**) 11.09.2014, 08:37

Zitat:

Zitat von herrweiss

... Dieses Verhalten leuchtet mir auch ein, aber ich habe keine Idee wie ich das nur mit CSS beeinflussen kann.

Die rechte Spalte darf dann nicht floaten ( float: none; ).

herrweiss · #5 (**permalink**) 11.09.2014, 08:50

Was meinst Du damit? Meinst Du die rechte Spalte soll in der vollen Breite unter der Linken Spalte angezeigt werden? So habe ich das auch bisher immer gelöst und so war es auch in meinem Entwurf vorgesehen, aber leider möchte mein Kunde das so umgesetzt haben, wie beschrieben

etux · #6 (**permalink**) 11.09.2014, 08:57

Zitat:

Zitat von herrweiss

Was meinst Du damit? Meinst Du die rechte Spalte soll in der vollen Breite unter der Linken Spalte angezeigt werden?

Nein, die rechte Spalte „verliert“ ihr Float, bekommt aber „margin-left“ (mit oder ohne Breite).

P.S.: die linke Spalte muss natürlich ein „clear: left“ dazu bekommen, um unter dem „#main“-div zu floaten.

etux · #7 (**permalink**) 11.09.2014, 09:10

Mal so auf die Schnelle:

HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>herrweiss :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
html { padding: 10px; }
body:before, body:after { content: ""; display: table; } body:after { clear: left; }
/* statt Inhalt */#main, #left, #right { padding-bottom: 4em; }

body {
  width: 50%;
  margin: 0 auto;
}
.container {
  float: left;
  width: 200%;
  margin-left: -50%;
}
#main,
#left,
#right {
  float: left;
  border: 10px solid #fff;
  box-sizing: border-box;
  background-color: #999;
}
#main {
  width: 50%;
  margin-left: 25%;
}
#left {
  width: 25%;
  margin-left: -75%;
}
#right {
  width: 25%;
}

@media (max-width: 768px) {
  body { width: auto; }
  .container {
    width: 30%;
    margin-left: 70%;
    background-color: #999;
  }
  #main,
  #left,
  #right {
    border: none;
  }
  #main {
    margin-bottom: 1em;
  }
  #main,
  #left {
    clear: left;
    float: left;
    width: 233%;
    margin-left: -233%;
    border-right: 1em solid #fff;
  }
  #right {
    float: none;
  }
}
</style>
<div class="container">
  <div id="main"><p>Hauptspalte ...</p></div>
  <aside id="left"><p>Linke Spalte ...</p></aside>
  <aside id="right"><p>Rechte Spalte ...</p></aside>
</div>

Du sprichst vom „Holy Grail“. So weit ich mich erinnere, haben bei dem Layout die Seitenspalten feste Breiten. Deine aber nicht

.

herrweiss · #8 (**permalink**) 11.09.2014, 09:20

Den Holy Grail löse ich im Mediaquery auf mit:

#main,
#left,
#right {
float: none;
position: relative;
margin-right:0;
margin-left:0;
left:0;
right:0;
}

Danke für Deinen Lösungsansatz, werde ich gleich mal testen!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Kundeninteresse an Responsive Layout	heiko_rs	Offtopic	18	24.05.2013 13:37
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 00:24