La colonne principale apparaît où la colonne de la barre latérale se termine

Question

Je suis braindead là-dessus et je sais que c'est simple.

Il y a un div en-tête, semble très bien. Il y a un div sur la barre latérale gauche, apparaît bien avec le haut blotti jusqu'à div diviseur.

Ensuite, il y a un contenu principal div. Il y a une image et h1 qui ressemblent à ce que vous attendez de la div en-tête, mais un grand écart apparaît jusqu'à la navigation (dans une div imbriquée). La navigation est correctement dans le div contenu principal, mais le haut de cette div est toujours aligné avec le bas du contenu de la barre latérale.

J'ai essayé des mélanges de clair: gauche et les deux et flottant et autres joyeusetés. Si à l'intérieur du html je déplace le div de la barre latérale en dessous du contenu principal div alors le contenu principal n'a pas d'écart mais la barre latérale a un grand écart supérieur et semble affleurer vers le bas de l'endroit où le nav de contenu principal se termine.

Qu'est-ce qui me manque ici, merci d'avance!

Answer 1

Définissez-vous des largeurs (ou des marges, des marges, des bordures) qui pourraient rendre votre div problématique trop large pour s'adapter?

Rappelez-vous que si vous faites quelque chose comme:

width: 100%; 
border: 1px solid; 

Ensuite, votre élément prendra 100% de largeur + 2 pixels.

Answer 2

Il semble que votre barre latérale apparaisse en premier dans l'ordre des sources.

Si vous avez les deux divs (barre latérale, principale) flottant dans des directions différentes, alors regardez la largeur disponible qu'ils partagent. Réduire la largeur d'un div (vous devriez avoir la largeur définie sur vos flotteurs) jusqu'à ce que leur largeur de moissonneuse-batteuse, y compris le rembourrage, la marge, les bordures s'adapte dans l'espace disponible. (Je n'utiliserai que la largeur dans mon exemple pour la brièveté). Quand cet effet se produit, dans mon expérience, celui qui se produit plus tard dans l'ordre des sources est celui qui empêche de glisser vers le haut dans sa place par trop de largeur.

<div id="container"> 
<div id="header">head</div> 
<div id="sidebar">side</div> 
<div id="mainContent">main</div> 
</div> 

Largeur de #sidebar & #mainContent trop large (#mainContent se cogné vers le bas):

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:651px;** 
background:red; 

} 

#sidebar{ 
float:left; 
**width:301px;** 
background:green; 
} 

Largeur de #sidebar & #mainContent s'adapter récipient à l'intérieur:

#container{ 
**width:950px;** 
margin:0 auto; 
background:blue; 
} 

#mainContent{ 
float:right; 
**width:650px;** 
background:red; 
} 

#sidebar{ 
float:left; 
**width:300px;** 
background:green; 
} 

btw ... si vous avez flotté les deux éléments dans la même direction, mais leur largeur combinée est trop large, la dernière dans l'ordre de la source se placerait sous l'élément flottant ci-dessus.

Answer 3

Votre h1 ou img a-t-il une marge supérieure? Il sortira du sommet de la division mainContent et le poussera vers le bas.