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

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