div layer im div layer

[obstbauer]

wen ich in einem div layer eine weitern div layer einfüge müsste doch der container mitwachsen so wie bei text auch.

ich hab einen container der keine float eigenschaft beinhaltet in diesem container möchte ich mehrere thumbnails nebeneinander mit jeweils einzelnen div layern andordnen die alle "float:left;" haben. leider wächst aber der coantainer darum nicht mit - sodass ich zwar die bilder schön angeordnet habe aber der eigenrtliche rahmen irgendwo oben rumdümpelt und die gallerie über den rand unten rausgeht...

wenn ich allerdings nach jeder reihe einen
<p>&nbsp;</p><p>&nbsp;</p> leerparagraph reinmurkse gehts,
aber das kann ja eigentlich nicht die lösung sein.

check:
falsch: http://www.synthflut.de/photo-1.php
richtig: http://www.synthflut.de/photo-2.php

danke für tipps

 

[mitra]

Ohne es jetzt ausprobiert zu haben; Das letzte DIV darf kein float_left mehr haben, bzw. sollte die floats eigentlich cleanen... Dann müsste es in etwas das geben was Du Dir vorstellst.

Beispiel, am Ende ein leeres DIV mit der ID clean und folgenden CSS-Anweisungen: "#clean {clear:both;}

Inzwischen hab ich es für Dich getestet und kann bestätigen das es genau so funktioniert!

 

[obstbauer]

hab ich grad mal kurz ausprobiert und geht leider auf anhieb nicht... dank dir trotzdem.

 

[mitra]

hab ich grad mal kurz ausprobiert und geht leider auf anhieb nicht... dank dir trotzdem.

Dann mein Lieber machst Du was falsch... Wie schon erwähnt hab ich es schnell getestet und es klappt:

<html>
<head>
<title>CSS Example</title>
<style type="text/css">
#box {
  border: 1px solid #333;
  margin:10px;
  padding:10px;
}
.small {
  border: 1px solid #ff0000;
  margin:10px;
  padding:10px;
  float:left;
}
#clean {clear:both;}
</style>
</head>
<body>
<div id="box">
<div class="small"> 1 </div>
<div class="small"> 2 </div>
<div class="small"> 3 </div>
<div class="small"> 4 </div>
<div class="small"> 5 </div>
<div class="small"> 6 </div>
<div class="small"> 7 </div>
<div class="small"> 8 </div>
<div class="small"> 9 </div>
<div id="clean"></div>
</div>
</body>
</html>

 

[Slashwalker]

Ich habe es gerade mit FireBug getestet. Es geht.



<div class="main">

<div class="container">

<div class="gfx"><a href="index.html"><span></span></a></div>

<div class="menu">
<a href="#"><span>profil</span></a>
<a href="#"><span>pixel</span></a>
<a href="#"><span>photo</span></a>
<a href="#" id="last"><span>kontakt</span></a>
</div>

<div class="content">

<div class="item">
<h1>Gallerie</h1>

<br>

<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div><div style="clear:both;"></div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div>
<div class="thumbnail">
<a href="http://www.apfeltalk.de/forum/images/image-1.jpg" rel="lightbox"><img src="photo/thumb1.jpg" alt="" height="40" width="100"></a>
</div><div style="clear:both;"></div>
</div>





</div>



</div>

<div class="foot_floater">

<div class="footer">© 2007</div>

<div class="footer_link_props"><div class="footer_link"><a href="#">synthflut.de</a></div> </div>

</div>


</div>

 

[obstbauer]

geil danke euch!!!! *karmageb!*