Hi
ich hab mich bemüht ein dreispaltiges Layout zu "erschaffen" und bin gescheitert... da das nur für eine Seite ist und ich eigentlich drei Listen nebeneinander abbilden will hab ich mir jetzt mit display:table geholfen, was auch funktioniert hat, aber dennoch lässt mich das Problem nicht los und ich finde den Fehler nicht.
Ziel:
3 Spalten nebeneinander die auf gleicher Höhe beginnen und dann unterschiedlich langen Inhalt haben können.
hier mal ein Beispielcode:
<!DOCTYPE html>
<html lang=de>
<head>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<main>
<article>
<h1>Überschrift 1</h1>
<section class="spaltelinks">
<h2>1. spalte</h2>
<h3>ü3</h3>
<p>erster Inhalt</p>
<h3>zweite Ü3</h3>
<h4>erste Ü4</h4>
<p>erster Inhalt Ü4</p>
<h4>2. Ü4</h4>
</section>
<section class="spaltemitte">
<h2>2. Spalte</h2>
<h3>ü3</h3>
<p>inhalt</p>
<h3>ü3</h3>
<p>inhalt</p>
</section>
<section class="spalterechts">
<h2>dritte Spalte</h2>
<h3>ü3</h3>
<p>inhalt</p>
<h3>ü3</h3>
<p>inhalt</p>
<h3>ü3</h3>
<p>inhalt</p>
</section>
</article>
</main>
<footer class="clearbeides">
beliebiger Text in beliebiger Länge
</footer>
</body>
</html>
Alles anzeigen
und dazu das css
body {
width: 90vw;
padding: 0 0 0 0;
margin: 0 auto 0 auto;
background-color:#fff7ee;
}
main {
color:#666;
width: 100%;
text-align:left;
padding: 0 2.5% 2em 2.5%;
margin: 0 auto 0 auto;
box-sizing: border-box;
border-left-width:0.14em;
border-left-style:solid;
border-left-color:#e1e1e1;
border-right-width:0.14em;
border-right-style:solid;
border-right-color:#e1e1e1;
}
article {
padding: 0 ;
margin: 0 ;
}
footer {
width: 100%;
color:#666;
text-align:center;
padding: 0 0 0 0;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border-top-width:0.14em;
border-top-style:solid;
border-top-color:#e1e1e1;
border-left-width:0.14em;
border-left-style:solid;
border-left-color:#e1e1e1;
border-right-width:0.14em;
border-right-style:solid;
border-right-color:#e1e1e1;
}
* { font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:97%;
line-height: 1.5em;
}
h1 { font-size:140%; font-variant:small-caps; color:#193c67 }
h2 { font-size:130%; font-variant:small-caps; color:#193c67 }
h3 { font-size:120%; font-variant:small-caps; color:#193c67;}
h4 { font-size:110%; font-variant:small-caps; color:#193c67 }
h5 { font-size:105%; font-variant:small-caps; color:#193c67 }
h6 { font-size:100%; font-variant:small-caps; color:#193c67 }
.spaltelinks {
width: 33%;
float: left;
}
spaltemitte {
margin-left: 33%;
margin-right: 33%;
}
.spalterechts {
width: 33%;
float: right;
}
.clearbeides {
clear:both;
}
Alles anzeigen
Was ich zwischendrin mal als Lösung versucht habe und mir sehr gut gefallen hat ist die css-eigenschaft column, aber da weigert sich leider der Firefox mit zuspielen und leider nachhaltig, aber schöner und einfacher kann man Spalten find ich kaum designen.
Aber zu obigem Problem... ich weiß nicht warum... aber das 2. Div ist höher als das erste und das dritte fängt erst unterhalb von zweiten an... trotz float:right....
UND, wenn ichs schon mal poste... der Internet-Explorer zerschmeißt mir bei den Design im Main IMMER die Rahmen und margin und padding, auch bei Seiten ganz ohne float und ich weiß nicht warum...
Bezüglich des drei-Spalten-Designs möchte ich gerne etwas dazu lernen.
Beim Rahmen, margin, padding und dem IE ist das eine Sache, die ich wirklich noch unbedingt bereinigen muss und ein Tipp wäre da toll.
Danke schon mal vorab
Gunni