CODEWITHSUNDEEP
cssinternet-explorercss-float
Tara
Tara

Reputation: 1598

float: left; Not working in IE?

(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.

#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}

Thanks for your help.

Tara

Upvotes: 2

Views: 17047

Answers (4)

Joonas
Joonas

Reputation: 7303

To me it looks like theres nothing really wrong with the content.

In ie6-ie9 the menu seems to be failing in some way.

and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..

Note that the extra letter s seems to be somewhere between #menu and #content .containers.

Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.

The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )

Upvotes: 2

Ruslan
Ruslan

Reputation: 10147

what i currently see in IE8 is: enter image description here

the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.

After my fix I see this: enter image description here

Upvotes: 3

Eric
Eric

Reputation: 97571

If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.

As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:

ul#list-nav {
    overflow: hidden;
}

ul#list-nav li {
    width: 16.66%;
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}

ul#list-nav li a{
    display: block;
    margin-left: 1px;text-decoration: none;
    padding: 5px 0;
    background: #754C78;
    color: #EEE;
    text-align: center;
}

That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px

Upvotes: 3

anderssonola
anderssonola

Reputation: 2195

add clear:both; on menu container.

note: is broken in Firefox to

Upvotes: 1

Related Questions