XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive: Floatverhalten von 3 Spalten bei kleineren Bildschirmen (http://xhtmlforum.de/showthread.php?t=71285)

herrweiss 10.09.2014 16:23

Responsive: Floatverhalten von 3 Spalten bei kleineren Bildschirmen
 
Liste der Anhänge anzeigen (Anzahl: 1)
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: Anhang 5156

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 10.09.2014 16:49

Soll das ganze auch im IE8 und IE9 funktionieren?

herrweiss 10.09.2014 16:56

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

etux 11.09.2014 09:37

Zitat:

Zitat von herrweiss (Beitrag 541127)
... 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 11.09.2014 09: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 11.09.2014 09:57

Zitat:

Zitat von herrweiss (Beitrag 541136)
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 11.09.2014 10: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 11.09.2014 10: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!


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023