ie8 css issue with floatting divs

hello, i have a nasty issue with my css
i use float divs and a system of background image to a div containing them all to have a kind of columns,
but in ie8 it doesn't work ,the navigation in col1 is under the others columns but it should be on the left!

as you can see in the explain.gif image

i will be VERY GRATEFULl if you find a solution,
i first tried absolute position but the inner content may differ and i don't know how lenght it may be!

IN the html the navigation menu (col1) should NOT be first,

that why there is float left and float right, and why it 's a bit messy


Who is Participating?
stehardy88Connect With a Mentor Commented:
Change Line 25 in your menu4-cols-.html to have a </form> at the end. This is whats causing the problem.

ORIGINAL L25: 		<div id="recherche"><input type="recherche" value="" name="recherche"></div>

NEW L25:		<div id="recherche"><input type="recherche" value="" name="recherche"></div></form>  

Open in new window

OK! So I figured out WHY it's happening: the container is too narrow to have all of the elements on one line. Here's what I did: I made #cols width:2500px and #global width:auto. It made all of the columns shift way to the right, out of the browser window, but it also made the navigation bar move to the left of the other columns.
So, here's a suggestion:
1) Use float:left rather than float:right and rearrange your columns so that the first column is at the top, followed by the second, followed by the third, etc.  You would also need to make your columns narrower so that they all fit on one line.  A downside to using float is that if the client resizes the browser window, the page will become all jumbled up.
That may not be the best solution, but I think it'll work.  Let me know what you find =D
Getting the Most out of CSS
jerrrrryAuthor Commented:
thanks, you you are great!
(but i feel a bit stupid )
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.