Scheinbar habe ich nicht genügend klar fomuliert:
meine site sollte eine einfache Stuktur haben:
- drei "Spalten"
- 1 "Spalte": 3 Zeilen
- 2 "Spalte": 1 Zeile
- 3 "Spalte": 1 Zeile
Ich habe das schon oft gemacht. Kein Problem.
Der Unterschied ist jetzt jedoch, dass die zweite Zeile in der ersten Spalte scrollt d.h. ein <ul> Container ist.
Es gelingt mir nicht die 3 Spalte oben auszurichten ohne dass das Scrollfeld verzogen wird.
Clear habe ich versucht...
Danke
HTML:
Code:
<div id="titelfeld">
<h1>Resultate</h1>
</div>
<ul id="resultatecontainer"> <!--mit Scroller, -->
<li><a href="resultat1.htm">Resultat 1</a></li>
<li><a href="resultat1.htm">Resultat 2</a></li>
<li><a href="resultat1.htm">Resultat 3</a></li>
<li><a href="resultat1.htm">Resultat 4</a></li>
<li><a href="resultat1.htm">Resultat 5</a></li>
</ul>
</div>
<div id="feldunterresultate">
<h1>hier</h1>
<h2>Kommentare<h2>
</div>
<div id="rechtesfeld">
<p>hier rechtes feld </p>
</div>
<div id="mittleresfeld">
<p>hier</p>
</div>
und das CSS:
Code:
body, p a {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im IE */
}
div#page {
text-align: left;
margin: 0 auto;
width: 900px;
padding: 0;
border: 0px;
}
ul#resultatecontainer {
overflow:auto; /*scroller*/
height: 200px;
width: 18em;
float: left; width: 14em;
margin: 0 0 1.3em; padding: 0em;
clear: both;
border-bottom: 10px solid #E4E2EE;
}
div#feldunterresultate {
float: left; width: 14em;
clear: both;
}
div#rechtesfeld {
float: right; width: 120px;
}
div#mittleresfeld {
margin: 0 12em 1em 15em;
padding: 0 1em;
border: 1px solid #E4E2EE;
}