[CSS] Dynamiczne treści wystają poza DIV. Opcje

[Robert3d]

Witam
Mam taki zakręcony problem który sam mnie zdziwił więc wydzieliłem sobie kod i zacząłem pisać go w oddzielnym pliku by mieć pewność że nic odgórnie nie psuje mi zabawy.

Problem polega na tym żę treści wychodzą poza DIV a jak powielę treści x2 to nie mogę za chiny ich paddingiem od siebie odessać.

[PHP] pobierz, plaintext 
 
<style>
    #kontener{
        border: 1px red solid;
        width: 190px;
    }
    h1{
        font-family: Arial;
        font-weight: bold;
        margin: 0;
        font-size: 0.75em;
        padding: 8px 5px;
    }
         li{
        margin: 0;
        font-family: arial;
        font-size: 0.8em;
        padding:0;
        width: 180px; 
        list-style: none;
 
    }
     ul{
        margin: 0;
        padding:5px;
        width: 190px; 
        list-style: none;
     }
</style>
<div id="kontener">
    <div id="menu"><h1>Nazwa Menu</h1>
        <form>
 
<ul>
<?php
while($row = mysqli_fetch_assoc($dane)){
?>
    <li>
        <div style="float: left;height: 23px; width: 20px;"><input type="checkbox" name="###" /></div>
        <div style="float: right; height: 23px; width: 150px; background: url(image/szarakropka.png) repeat-x; background-position: bottom; "><?php echo $row['rodzaj']; ?><img src="<?php echo $row['obrazek']; ?>" width="19" height="15" alt="1"/>
        </div>
    </li>  
<?php } ?>            
</ul>           
        </form>
    </div>   
 
<div id="menu"><h1>Nazwa Menu</h1>
        <form>
 
<ul>
<?php
while($row = mysqli_fetch_assoc($dane)){
?>
    <li>
        <div style="float: left;height: 23px; width: 20px;"><input type="checkbox" name="###" /></div>
        <div style="float: right; height: 23px; width: 150px; background: url(image/szarakropka.png) repeat-x; background-position: bottom; "><?php echo $row['rodzaj']; ?><img src="<?php echo $row['obrazek']; ?>" width="19" height="15" alt="1"/>
        </div>
    </li>  
<?php } ?>            
</ul>           
        </form>
    </div>           
</div>  
 
[PHP] pobierz, plaintext 

Ten post edytował Robert3d 6.06.2011, 00:22:11

[mortus]

W linii 42 i 59 przed </li> wstaw:

[HTML] pobierz, plaintext 
<div class="clear"></div>
[HTML] pobierz, plaintext 

a klasie clear nadaj styl:

[CSS] pobierz, plaintext 
.clear{
  clear: both;
}
[CSS] pobierz, plaintext 

Taki dodatkowy <div> służy do usunięcia opływania (float).

Powinno pomóc.

[ShadowD]

Zamiennie można użyć overfloaw:auto na element obejmujący całość.

[Robert3d]

dziękuję od tego gapienia się całymi dniami w literki przeoczyłem... Często mi się to zdarza hmm