Div Messs Up après avoir dépassé la hauteur Main Div

J'ai donc travaillé sur ce site depuis un moment, mais j'ai rencontré un problème. Comme vous pouvez le voir, je peux continuer à empiler mes divs sidebox, mais une fois qu'il dépasse la div principale, pour une raison quelconque, il va directement à la droite du div sidebox au dessus.
J'ai essayé différentes façons de réparer, mais je n'ai pas encore réussi.Div Messs Up après avoir dépassé la hauteur Main Div

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/style.css" /> 
</head> 
<body> 
<div id="wrapper"> 
<!--Navigation--> 
<div id="sidebox"> 
<div id="nav"> 
<ul> 
<a href=""><li>HOME</li></a> 
<a href=""><li>REGISTER</li></a> 
<a href=""><li>DOWNLOADS</li></a> 
<a href=""><li>CHAT BOX</li></a> 
<a href=""><li>FORUM</li></a> 
<a href=""><li>RANKINGS</li></a> 
<a href=""><li>DONATE</li></a> 
</ul> 
</div> 
</div> 

<!--Banner--> 
<div id="banner"></div> 

<!--Main Content--> 
<div id="main"> 

</div> 
<div class="clear"></div> 
<!--Server Information--> 
<div id="sidebox"> 

</div> 

<!--Partners--> 
<div id="sidebox"> 

</div> 

<div id="sidebox"> 

</div> 

<div id="sidebox"> 

</div> 

<div id="sidebox"> 

</div> 

<div id="sidebox"> 

</div> 

<div id="sidebox"> 

</div> 

</div> 
</body> 
</html>

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-image: url('../img/bg.png'); 
} 

#wrapper { 
    width: 960px; 
    margin: 20px auto 0; 
} 

#banner { 
    width:712px; 
    height:175px; 
    background-color: #333; 
    border: 1px solid black; 
    outline: 2px solid #444; 
    margin-bottom:14px; 
    float:right; 
} 

#sidebox { 
    background-color: #333; 
    border: 1px solid black; 
    outline: 2px solid #444; 
    width:230px; 
    min-height:100px; 
    float:left; 
    margin-bottom:14px; 
} 

#nav { 
    font-family: arial; 
    background:red; 
} 

#nav ul { 
    list-style-type: none; 
} 

#nav ul li { 
    background: url('../img/navbg.jpg'); 
    padding-top:5px; 
    padding-bottom: 5px; 
    padding-left:5px; 
    border-bottom: #262626 solid; 
    border-top: #262626 solid; 
    border-width: 1px; 
} 

#nav ul li:hover{ 
    background: url('../img/navbghov.jpg'); 
} 

#nav ul a { 
    color: #808080; 
    font-size: 14px; 
    text-decoration: none; 
} 

#main { 
    background-color: #333; 
    border: 1px solid black; 
    outline: 2px solid #444; 
    float:right; 
    width:712px; 
    min-height:600px; 
} 

.clear { 

}

Source

2014-06-17 user3643016

Okay. Alors..? Qu'est-ce qui ne va pas..? quel est le comportement attendu ..? –

s'il vous plaît fournir un violon ou un lien vers le site Web –

Bonjour, vous devez utiliser emballage supplémentaire vérifier ce bac http://jsbin.com/sowivuvi/1/

il y a deux divs #sidebar, #content

Source

2014-06-17 12:42:04 banditpanda

Je me préparais à faire la même suggestion. Ajouter les divs supplémentaires sépare la page comme je suppose que l'OP a indendu. Les boîtes côte à côte sont parce que le div 'main' ne repousse plus les sidebox. – user3507600

Div Messs Up après avoir dépassé la hauteur Main Div

Répondre

Questions connexes