HTML CSS div floating left goes under , below div floating right?

Question

I'm hoping someone can help me: I have a left column container #left-column, with a float:left; and some elements (slideshow, images, text) floating on the right. Everything is placed in the main container which has a width value of 990px; The left column is 240px, while all the elements on the right have widths which are enough to fit on the right side (720px). Here is a graphic of what is happening:

What can I do to solve this ? My guess is that there is something to do with the slideshow div...

#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;
}

What should I do ? MANY thanks...!!

EDIT - When I put a position:asbolute to the left-column container, it goes straight up to the top, which looks fine , but this is not the solution I'm looking for.

Answer 1

Thanks to everybody who gave me some tips and hints to solve my problem. After messing around abit in the code I found that placing the left column BEFORE the slideshow was the solution. Something I missed: the slideshow container was after the left column... Basically the order of things on the page was not right. As this html code is outputed with some PHP I didn't see it at first, also sorry but could hardly post the whole html code, thanks to everybody though I really appreciated your replies trying to help.

Answer 2

Difficult to understand specifically for your context without the HTML, but here is a global idea : you generally don't need to put float: left; for left column, and float: right; for right column, even if it seems logical for you.

An easier and more reliable way would be to put all your elements that will be next to each other on float: left; (so the right column would be floating left, just near the left column)

With your image, I would do something like that :

<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; }

Answer 3

Check the margin on both the #left-column and the #slideshow. The width of an element only takes into account border and padding. Your total width is 990px. #left-column is 240px and #slideshow is 720px. 240+720 is 960px. So if you have more than 30px of margin, one of the elements has to move down.

Answer 4

Try to divide the main wrapper into 2 cols like this. (i add a footer incase u need it later)

Codepen

then just put the other div's inside

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

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


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


</div>

and for the 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;
}

Answer 5

Either set

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

Or

Try reducing #slideshow width

make sure you are making clear both the floating divs

Answer 6

use a minus margin-top for #left-column with the value of your #slidshow height