nicht angemeldet
Hallo allerseits,
habe folgendes Problem.
Ich möchte gerne ein zweispaltiges Layout haben. Habe mich dafür am Selfhtml Beispiel unter http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm orientiert.
Funktioniert auch hervorragend.
Nun möchte ich aber im Content Div weitere Div Elemente platzieren. Diese haben eine feste Höhe und Breite, alle gleich groß. Sie sollten bei Bedarf umgebrochen werden, abhängig von der jeweiligen Fenstergröße des Browsers.
Ich habe das folgendermaßen versucht:
<div id="content">
<div class="search_result">xxx</div>
...
<div class="search_result">xxx</div>
<div style="clear:left"></div>
</div>
Das ganze funktioniert ebenfalls tadellos. Leider allerdings nicht im aktuellen IE. Dort landen einige Elemente über dem Content Div.
Kennt jemand dieses Problem, oder hat eine Idee, woran das liegen mag?
Als Referenz, hier noch der vollständige Code des Entwurfs:
HTML
<body>
<div id="container">
<div id="menu_left">
yyy
</div>
<div id="content">
<div class="search_result">xxx</div>
<div class="search_result">xxx</div>
<div class="search_result">xxx</div>
<div class="search_result">xxx</div>
<div class="search_result">xxx</div>
<div class="search_result">xxx</div>
<div style="clear:left"></div>
</div> <!-- id="content" -->
</div> <!-- id="container" -->
</body>
</html>
CSS
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
}
div#menu_left {
font-size: 0.91em;
float: left; width: 10em;
margin: 0; padding: 10px;
border: 1px dashed silver;
}
div#content {
margin-left: 11em;
padding: 0 1em;
border: 1px dashed silver;
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}
div.search_result {
border: 1px dashed black;
padding: 5px;
margin: 10px;
width: 150px;
height: 200px;
float: left;
}