HTML CSS div flottante gauche va sous , au-dessous de la div flottant à droite?

Je suis en espérant que quelqu'un peut m'aider: j'ai une colonne de gauche contenant #gauche de la colonne, avec un float:left; et certains éléments (diaporama, images, texte) flottant sur la droite. Tout est placé dans le conteneur principal qui a une valeur de largeur de 990px; La colonne de gauche est 240px, bien que tous les éléments sur le droit d'avoir des largeurs qui sont assez pour tenir sur le côté droit (720px). Voici un graphique de ce qui se passe:

Que puis-je faire pour résoudre ce problème ? Ma conjecture est qu'il y a quelque chose à voir avec le diaporama div...

HTML CSS div flottante gauche va sous , au-dessous de la div flottant à droite?

#main-container {
    width:990px;
    margin:8px auto;
}
#left-column {
    width:240px;
    float:left;
}
#slideshow {
    float:right;
    width:720px;
    height:300px;
}
a.image {
    float: right;
    display:inline-block;
}
.text {
    float:right;
    width:720px;
}

Que dois-je faire ? Merci BEAUCOUP...!!

EDIT - Quand je mets une position:asbolute à la gauche de la colonne conteneur, il va droit vers le haut, ce qui a l'air bien , mais ce n'est pas la solution, je suis à la recherche d'.

Besoin de plus d'info, le mettre sur jsfiddle.net
Pourriez-vous fournir avec le code HTML que vous utilisez?
À peu près toute réponse est une supposition, à moins que nous pouvons voir html
Désolé les gars le html serait trop long à copier et passé parce que c'est dans un CMS. J'ai répondu à ma question, car j'ai trouvé la réponse. Merci pour votre aide.

OriginalL'auteur mlclm | 2013-11-19

  1. 2

    Difficile à comprendre spécifiquement pour votre contexte sans le HTML, mais voici une idée globale : vous n'avez généralement pas besoin de mettre float: left; pour la colonne de gauche, et float: right; pour la colonne de droite, même si cela semble logique pour vous.

    Plus facilement et de façon plus fiable serait de mettre tous votre les éléments qui seront à côté de l'autre sur float: left; (de sorte que la colonne de droite serait flottant à gauche, tout près de la colonne de gauche)

    Avec votre image, je ferais quelque chose comme ça :

    <div id="leftColumn">
</div>
<div id="rightColumn">
    <div id="slideshow"></div>
    <div id="imgWrapper">
        <div class="imgDiv"></div>
        <div class="imgDiv"></div>
    </div>
    <div id="text"></div>
</div>


#leftColumn {
    float: left;
    overflow: hidden;
}

#rightColumn {
    float: left;
    overflow: hidden;
}

.imgDiv {
    float: left;
    overflow: hidden;
}

#imgWrapper { overflow: hidden; }
    Il n'y a pas besoin d'ajouter float:left à la rightColumn.
    Merci pour votre replyy, j'ai trouvé la solution et a répondu à ma question. Merci bien!

    OriginalL'auteur Jérémy Dutheil

  2. 1

    Vérifiez la marge sur les deux la #gauche de la colonne et de la #diaporama. La largeur d'un élément ne prend en compte que la frontière et le rembourrage. Votre largeur totale est de 990px. #gauche de la colonne est 240px et #diaporama est 720px. 240+720 est 960px. Donc, si vous avez plus de 30px de marge, l'un des éléments a à se déplacer vers le bas.

    Merci pour votre replyy, j'ai trouvé la solution et a répondu à ma question. Merci bien!

    OriginalL'auteur zsaat14

  3. 1

    Essayer de diviser les principales wrapper en 2 cols comme ça. (j'ai ajouter un pied de emballent u besoin plus tard)

    Codepen

    puis mettre l'autre div à l'intérieur

    <div id="main-container">
 <div id="left-column">left-column</div> 

 <div id="right-column">right-column</div> 


 <div id="footer">footer</div> 


</div>

    et pour le css 

    #main-container {
    width:990px;
    background-color: #3d3d3d;
}
#left-column {
    width:240px;
    float:left;
  height:300px;
  background-color: red;
  margin-left: 15px;
}
#right-column {
    width:720px;
    height:300px;
      float:left;
    background-color: green;
}
#footer {
    clear: both;
    width:990px;
    height:50px;
  background-color: orange;
}
    Merci pour votre replyy, j'ai trouvé la solution et a répondu à ma question. Merci bien!

    OriginalL'auteur Wrostran

  4. 1

    Merci à tous ceux qui m'ont donné quelques conseils et astuces afin de résoudre mon problème. Après déconner abit dans le code, j'ai trouvé que le passage de la colonne de gauche AVANT le diaporama a été la solution. Quelque chose me manquait: le diaporama conteneur a été après la colonne de gauche... en gros l'ordre des choses sur la page n'a pas le droit. Comme ce code html est outputed avec du PHP, je ne l'avais pas vu au premier abord, aussi désolé, mais pouvait à peine poster tout le code html, merci à tout le monde mais j'ai vraiment apprécié vos réponses essayer d'aider.

    OriginalL'auteur mlclm

  5. 0

    Soit définir 

    vertical-align:top; //to left column `#left-column`

    Ou

    Essayez de réduire #slideshow largeur

    assurez-vous que vous êtes clair à la fois flottante divs

    Merci pour votre replyy, j'ai trouvé la solution et a répondu à ma question. Merci bien!

    OriginalL'auteur Dhaval Marthak

  6. 0

    utiliser un moins margin-top pour la #gauche de la colonne avec la valeur de votre #slidshow hauteur

    Merci pour votre réponse, j'ai trouvé la solution et a répondu à ma question. Merci bien!

    OriginalL'auteur Godinall