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

css, css-float, floating, html

Solution

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.

Problem

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.

Original source