Float not clearing in IE

[ollyno1uk]

Hi

I hope someone can help advise.

I have been working on a site for a while and I thought I had it sorted until I looked at some of the pages in IE and realised that the clear:both does not seem to be clearing.

I have gone through everything for hours and cannot find where the problem could be. It looks fine in firefox and on the iphone.

http://nationwideinnovations.co.uk/garage-doors.html

Thanks in advance for any advice.

[Excavator]

Good morning ollyno1uk,
It looks like you have many elements containing uncleared floats, #also_interested and #product_content for example...there are others as well.

My preferred method for clearing floats is adding overflow: auto; to the containing elements CSS.
Like this -

#also_interested {
    background: #FF0000;
    margin: auto;
    overflow: auto;
    padding-top: 25px;
}

I use the background color as a demo just to show the floats are cleared.

See this explanation of how overflow: auto; clears your floats.

Using overflow this way has the added benefit of showing you when your box model is off. It will make a scroll bar appear if thing do not fit in a container. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

[ollyno1uk]

Hi thanks for helping!

I was not familiar with this so I will certainly look into it.

Does this mean I need to apply it just to the outer div that I wish the footer to be beneath not over or do I need it on each element?

Is the reason it is not currently working because there are some uncleared floats even though they are within a cleared div?

Thanks again!

Olly

[Excavator]

Originally Posted by ollyno1uk

Does this mean I need to apply it just to the outer div that I wish the footer to be beneath not over or do I need it on each element?

Is the reason it is not currently working because there are some uncleared floats even though they are within a cleared div?

It kind of sounds like you are under the impression your clear is cascading to child elements and that is not the case. If you have a new div element with floats that is contained in a cleared div, that new one will likely need cleared as well.

[ollyno1uk]

Ok thanks - makes sense. I think I may have to rewrite the code as tried several options but I cannot achieve it in IE.

Thanks again

[ollyno1uk]

It is still baffling me.

I changed the background of #products_text to red to make try and diagnose.

This is the div that I need the footer to sit beneath. Directly below this div there is a clear:both so surely it should be clearing any floating elements above it, yet the footer still sits over it?

Help!!!??!!?

(only in IE)

[Excavator]

In your style.css you have #products set at height: 50px;
Remove that setting and see what happens.

[ollyno1uk]

Ok this is good, at least there is improvement.

It seems to have solved the issue however the bottom of the "no 1 for..." has now gone, which was why I had that height set.

***actually*** I then moved a clear:both to the bottom of the products div which I guess would expand it to the inner divs and it seems to have solved it.

So was that it? if so I would love to buy you a pint as this has been driving me mad!

[Excavator]

Originally Posted by ollyno1uk

So was that it? if so I would love to buy you a pint as this has been driving me mad!

It seems to work in everything I've got. I looked at it in FF10, IE9, IE8 and IE7.
Good job on the valid code too
A couple small things in the CSS you might want to look at - http://jigsaw.w3.org/css-validator/v...age-doors.html

I'll sure let you buy me a pint next time your in Alaska , Thanks!

[ollyno1uk]

Thanks again

Regarding the css, I know the lightyellow; is not valid but the other CSS comes with 2 x scripts I bought and I am not sure if I can validate them.

Never the less, I have done the best I can!

PM me your paypal if you have one - I don't need to be in Alaska to buy you a pint thanks to the wonderful internet!

[ollyno1uk]

I have now gone live with this site now and it is pretty much up together however I seem to have an issue with IE6 dropping my right hand column float below the rest - almost like it doesn't have room to sit there.

Currently about 1% of traffic uses IE6 which is still considerable and certainly not worth losing.

So any idea how I fix this one?

http://www.nationwideltd.co.uk/awnings.html


(apologies if I should have started a new thread)

[Excavator]

Originally Posted by ollyno1uk

I have now gone live with this site now and it is pretty much up together however I seem to have an issue with IE6 dropping my right hand column float below the rest - almost like it doesn't have room to sit there.

I get a 404 with that link right now, I'll check it later and see if it's up.
IE6 has a nasty habit of wrecking floats, there are any number of bugs specific to that browser that can cause what you're seeing.
There is some help though, check out these websites:

• one
• two

Or you can do like I've started and just not support a 10yr old browser that was crap when it was new. I add this to some of my sites just to be polite to people that are stuck with that browser:

        <!--[if lt IE 7]>
                <div id="ie6Warning">
                    <h2>Time to upgrade your browser?</h2>
                        <p>
                            If you're reading this, you're surfing using Internet Explorer 6, a 10+ year-old browser that 
                            cannot cope with the demands of the modern internet. For the best web experience, it is strongly recommended 
                            you upgrade to a more modern version of any of the browsers listed here:
                                <ol>
                                    <li><a href="http://www.getfirefox.com/">Firefox</a></li>
                                    <li><a href="http://www.opera.com/">Opera</a></li> 
                                    <li><a href="http://www.apple.com/safari/">Safari</a></li>
                                    <li><a href="http://www.google.com/chrome">Google Chrome</a></li>
                                    <li>or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
                                </ol>
                             The layout of this site is designed to work with those browsers. We are reasonably certain that even if the layout is not quite
                             right in older browsers, the funcionality should still be available to you. Our suggestion of upgrading your browser is only for 
                             your viewing pleasure and is by no means a requirement for using this website.
                        </p>
                </div>
      	<![endif]-->

Here's a bit of CSS that goes with that statement:

#ie6Warning {
	width: 600px;
	padding: 25px;
	background: #f00;
}

[ollyno1uk]

Thanks for the excellent response once again. I will work my way through the two resources you mentioned. Even if not for now, they will certainly be useful for the future!

I gave you the wrong link:

http://www.nationwideltd.co.uk/sun-awnings.html

I like your idea of not supporting it and if there is not a simple fix, this is the way I will go with this site!