Hallo,
auf meiner Seite http://mein-urheberrecht.de/bibliothek.html sind eine Reihe Divs gefloatet (Mit Symbolen und Links zu den entsprechenden Beiträgen in der Mitte). Ich wollte ein responsives Design schaffen, sodass die Divs sich der Fensterbreite des Browsers entsprechend anordnen. Leider klappt das nicht, ab der zweiten Zeile gibt es Probleme, z.B. gibt es dort nur ein Div in der ganzen Zeile und die nachfolgenden rutschen in die nächste Zeile.
Code
<div class="contentbibliothek">
<div>
<a href="bibliothek_bilder.html">
<p>
<img src="IMG/pinsel_stift.png" width="100px" alt="Freie Bilder" title="Stockfotos und andere Vorlagen für Dein Projekt" />
</p>
<p>Freie Bilder und Fotos im Netz</p>
</a>
</div>
<div>
<a href="bibliothek_musik.html">
<p>
<img src="IMG/wave.png" width="100px" alt="Freie Musik" title="Musik und Sounds für Dein Projekt" />
</p>
<p>Freie Musik im Netz</p>
</a>
</div>
<div>
<a href="bibliothek_video.html">
<p>
<img src="IMG/video.png" width="100px" alt="Freie Videos" title="Filme und Videos für Dein Projekt" />
</p>
<p>Freie Filme und Videos im Netz</p>
</a>
</div>
<div>
<a href="bibliothek_texte.html">
<p>
<img src="IMG/txt.png" width="100px" alt="Freie Texte" title="Texte für Dein Projekt" />
</p>
<p>Freie Texte im Netz</p>
</a>
</div>
<div>
<a href="bibliothek_bsuaw.html">
<p>
<img src="IMG/book.png" width="100px" alt="eBook" title="ein eBook von buchschreiben.com" />
</p>
<p>Buch schreiben und Autor werden</p>
</a>
</div>
<div>
<a href="bibliothek_kvbk.html">
<p>
<img src="IMG/journal.png" width="100px" alt="Vertragsmuster" title="Vertragsmuster" />
</p>
<p>Kaufvertrag Bildende Kunst</p>
</a>
</div>
<div>
<a href="bibliothek_model.html">
<p>
<img src="IMG/journal.png" width="100px" alt="Vertragsmuster" title="Vertragsmuster" />
</p>
<p>Model Release Vertrag</p>
</a>
</div>
<div>
<a href="weblinks.html">
<p>
<img src="IMG/web.png" width="100px" alt="Weblinks" title="weiterführende Links zum Thema Urheberrecht" />
</p>
<p>Weblinks</p>
</a>
</div>
<div style="clear: both;"></div>
</div>
Alles anzeigen
Code
.contentbibliothek {
position: relative;
top:4em;
left:25em;
width:60%;max-width:45em;
text-align: center;
min-height: 800px;
color: #FFF;
font: 1.2em Book Antiqua, Palatino, serif;
text-shadow: 0.1em 0.1em 1px #000;
}
.contentbibliothek div {
float: left;
width: 110px;
margin: 2em;
}
.contentbibliothek div a {
color: #FFF;
}
Alles anzeigen
Das Problem tauch bei mir immer wieder auf, hab mir schon verschiedene Tutorials zu float und clear angesehen, aber irgendwie klappt es bei mir nicht.
Was mach ich falsch ?