✔ 3 Spalten Layout macht Probleme

Danke an alle für die Unterstützung.
Es ging hier nur um das "global clear Problem bei nicht gefloateten Elementen", wo die Lösung von SpiceLab bzw ein Clearfix das Problem lösen.
@djheke semantisch korrekter ist das Bild natürlich im Artikel, das ändert aber nichts an der Problematik. Wie beschrieben ist es nur eine vereinfachte Darstellung des Problems. diplay:table und table-cell würde sicher auch funktionieren, kann ich aber nicht anwenden, weil es nicht in das geplante responsive Verhalten passen würde. (Verwende ich ansonsten übrigens auch sehr ungern für das Grundgerüst einer Seite)
 
Was hat denn diese Problematik mit Responsive zu tun? Das Beispiel mit overflow:hidden reicht doch aus. Aber mit display:table hast du recht, Ist eigentlich für XML Dateien vorgesehen.
Ein weiteres Beispiel
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin:0;
padding:0px;
}

body {
background:#333;
}

#wrapper {
width:90%;
margin:0 auto;
overflow:hidden;
background:#fff;
}

#header {
background:#dad;
padding:20px;
}
#col1 {
width:30%;
float:left;
}

#col1 nav {
background:#eed;
margin:10px;
}
#col1 nav ul {
list-style:none;
}
#col1 nav a {
display:block;
padding:5px;
color:#000;
border-bottom:1px solid #999;
text-decoration:none;
background:#eed;
}

#col2 {
margin:10px 10px 10px 30%;
border-left:1px solid #999;
}

#col2:after {  /* Somit ist col2 immer die längste Spalte */
content:"";
display:block;
clear:both;
}

article {
float:left;
margin:0 10px 10px 10px;
background:#eed;
}

article div {
float:left;
width:100%;
}

article h2 , article p {
margin-right:200px;
padding:10px;
}

article img {
display:block;
width:200px;
float:right;
margin:10px;
}

#footer {
background:#dad;
padding:10px;
clear:both;
}




</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Homepage</h1></div>
<div id="col1">
  <nav>
  <ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Impressum</a></li>
  </ul>
</nav>
</div>


<div id="col2">
  <article>
  <div>
  <img src="bild3.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
  <h2>H2 Überschrift</h2>
  <p>Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext</p>
  </div>
</article>

  <article>
  <div>
  <img src="bild2.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
  <h2>H2 Überschrift</h2>
  <p>Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext</p>
  </div>
</article>

  <article>
  <div>
  <img src="bild3.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
  <h2>H2 Überschrift</h2>
  <p>Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext</p>
  </div>
</article>

</div>
<div id="footer"><h3>Footer</h3></div>
</div><!--/wrapper-->


</body>
</html>
 
#col:after ist nur dafür gedacht, dass sie immer die längste Spalte ist und ich eine vertikale Trennlinie verwenden kann. Wenn es nicht gewünscht ist kann es auch weg.
Was ich zum Kotzen finde, ist, dass du nur unvollständige Codes angibst. So können wir nicht helfen. Also, viel Spaß mit deinem Projekt.
 
djheke hat gesagt.:
Was ich zum Kotzen finde, ist, dass du nur unvollständige Codes angibst. So können wir nicht helfen. Also, viel Spaß mit deinem Projekt.
Zum Vergrößern anklicken....
1) Ich habe mich bei SpiceLab(der es verstanden hat) für die Lösung bedankt und den Beitrag als gelöst markiert.
2) Ich habe mich noch mal bei allen (inklusive dir) für die Bemühungen bedankt und nochmals darauf verwiesen, dass das Problem bereits gelöst ist. Dein Einsatz ist auch sehr nett!
3) Es tut mir leid dass, du meine Anfrage nicht verstanden hast, bzw, dein Lösungsansatz für mich nicht der beste ist. Ich hoffe dennoch dein Ego ist zukünftig stark genug in so einer Situation nicht ausfallend zu werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück