• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1006
  • Last Modified:

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

thanks




explain.gif
menu4-cols-.html
style4cols.css
4cols.gif
0
jerrrrry
Asked:
jerrrrry
1 Solution
 
MageWindCommented:
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
0
 
stehardy88Commented:
Change Line 25 in your menu4-cols-.html to have a </form> at the end. This is whats causing the problem.

stehardy88
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

0
 
jerrrrryAuthor Commented:
thanks, you you are great!
(but i feel a bit stupid )
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now