✔ 3 Spalten Layout macht Probleme

H

hans jörg

Erfahrenes Mitglied
Hallo ich habe folgendes 3 Spalten Layout:

Links eine Navigation, rechts mehrere Absätze mit Text und Bild. Die Breite vom Text soll flexibel bleiben.
Das Problem besteht nun darin, wenn die Höhe der Navigation gößer als die Höhe des ersten Absatzes ist fängt der zweite Absatz nicht direkt unter dem ersten an, sondern unter der Höhe der Navigation. Das Problem liegt darin, dass der clear:both befehl nach dem Absatz auch den float der Navigation beendet.
Die naheliegendste Lösung nach dem Absatz nur clear:right zu verwenden funktioniert nicht, da ich im article noch weitere Links gefloatete Elemente brauche.

Bin über jeden Lösungsansatz Dankbar!

vereinfachte Darstellung:
Code: 
<div id="container">
     <div id="linke_spalte">Navigation...link 1...... link 2......</div>
     <div id="rechte_spalte">
           <img src="beschreibendes_bild.jpg">
           <article>
           Inhalt Text 1
           </article>
           <div class="clear"></div>
           <img src="beschreibendes_bild.jpg">
           <article>
           Inhalt Text 2
           </article>
           <div class="clear"></div>
           <img src="beschreibendes_bild.jpg">
           <article>
           Inhalt Text 3
           </article>
         <div class="clear"></div>
     </div>
     <div class="clear"></div>
</div>

#container
{
width:100px;
}
#linke_spalte
{
width:300px;
float:left;
}
#rechte_spalte
{
margin-left:300px;
}
img
{
    display:block;
    width:200px;
    float:right;
}
article
{
margin-right:200px;
}
.clear
{
    clear:both;
}
 
Wozu hast du nach jedem Artikel ein clear-div? Raus damit und alles ist gut. Ach und wo sind denn die drei Spalten? Sehe nur zwei.
 
Zuletzt bearbeitet:
Alice hat gesagt.:
Ich habe mir den Quelltext nicht angeschaut, kann dir aber bei 3 Spalten "display: table;" empfehlen.
Zum Vergrößern anklicken....
Was nur der halben Wahrheit entspricht, denn display:table-cell erzeugt letztlich die Spalten :)
CSS: 
.table {display:table}
.table-cell {display:table-cell}
HTML: 
<div class="table">
  <div class="table-cell">...</div>
  <div class="table-cell">...</div>
  <div class="table-cell">...</div>
</div>
djheke hat gesagt.:
Wozu hast du nach jedem Artikel ein clear-div? Raus damit und alles ist gut.
Zum Vergrößern anklicken....
Damit "Artikel 2" unterhalb von "Artikel 1" fortgesetzt wird, usw. Ansonsten würden die Grafikelemente nebeneinander und "treppenartig versetzt" erscheinen, wenn der Umfluß nicht abgebrochen wird ;)
djheke hat gesagt.:
Ach und wo sind denn die drei Spalten? Sehe nur zwei.
Zum Vergrößern anklicken....
Ich vermute, die drei Spalten beziehen sich auf Navigation, Artikeltext und Bild :)
 
djheke hat gesagt.:
Was allerdings Quatsch ist.
Zum Vergrößern anklicken....
Ich würde hier mal den dritten fehlenden ID-Bezeichner #mittlere_spalte nicht so sehr auf die Goldwaage legen, sondern nüchtern die Ausgabe am Bildschirm betrachten, und da offenbaren sich nunmal drei Spalten - Stichwort: "Nested Floats" ;)
djheke hat gesagt.:
Übrigens sollten die Bilder im article-Element rein, daBeschreibung-
Zum Vergrößern anklicken....
Das würde aber nichts an dem Umstand und dem daraus resultierenden Problem ändern, die Grafiken mittels float-Regel vom Text umfliessen zu lassen, wenn man nicht auf die äquivalenten HTML-Attribute des <img>-Elements zurückgreifen will: http://de.selfhtml.org/html/grafiken/ausrichten.htm#textumfluss ;)
 
Zuletzt bearbeitet:
Hier mal ein simples 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;
}

header {
padding:20px;
background:#aee;
}

nav {
float:left;
width:280px;
background:#eed;
margin:10px;
}

nav ul {
list-style:none;
}

a {
display:block;
padding:5px;
color:#000;
border-bottom:1px solid #999;
text-decoration:none;
background:#eed;
}

article {
margin:10px 10px 10px 300px;
background:#aae;
overflow:hidden;
}

article img {
float:left;
margin:0 10px 10px 10px;
padding:10px;
background:#ded;
}

article h2 {
margin:10px;
padding:10px;
background:#ddd;
}
article p , article h3 {
margin:10px 10px 10px 240px;
padding:10px;
background:#dee;
}

footer {
margin:10px;
padding:20px;
clear:both;
background:#dea;
}
</style>
</head>
<body>
<header><h1>Meine Wbseite</h1></header>
<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Impressum</a></li>
</ul>
</nav>
<article>
<h2>Überschrift</h2>
<img src="bild.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
<h3>H3 Überschrift</h3>
<p>Beispieltext</p>
</article>
<article>
<h2>Überschrift</h2>
<img src="bild.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
<p>Beispieltext</p>
</article>
<article>
<h2>Überschrift</h2>
<img src="bild.jpg" width="200" height="150" alt="Beschreibung" title="Titel">
<p>Beispieltext</p>
</article>
<footer><p>Seitenende</p></footer>
</body>
</html>

Wenn die Themen passen konnte man auch die article-Elemente mit section kappseln.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück