ie8 css issue with floatting divs

Posted on 2009-12-28
Last Modified: 2013-12-08
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


Question by:jerrrrry
    LVL 3

    Expert Comment

    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
    LVL 8

    Accepted Solution

    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


    Author Closing Comment

    thanks, you you are great!
    (but i feel a bit stupid )

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    6 Experts available now in Live!

    Get 1:1 Help Now