div overlap

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

erwan@barzhoneg.com - 29 Nov 2005 13:38 GMT

Hi,

I've read about the float divs not being interpreted by the browser as
block, therefore creating this annoying overlap that everyone talks
about.

I've hacked this problem by adding clear:both divs everywhere and also
br clear=all tags.

I'm ok with opera and IE

but my main div still doesn't size in Firefox, and the div below my
content_main div don't go where they should go

web site is at http://woodconnection.sitescope.net

anyone has the solution for this firefox strangie ?

thanks,

erwan, Locronan, Brittany
http://www.poleouest.com

Reply to this Message

Danny@Kendal - 29 Nov 2005 13:57 GMT

> I'm ok with opera and IE
>
> but my main div still doesn't size in Firefox, and the div below my
> content_main div don't go where they should go
>
> web site is at http://woodconnection.sitescope.net

Try validating the page then fixing the hundred-or-so errors. When that's
done see if the page works properly.

Reply to this Message

Ed - 23 Dec 2005 16:59 GMT

> Hi,
>
[quoted text clipped - 18 lines]
> erwan, Locronan, Brittany
> http://www.poleouest.com

Can't pretend to understand your html/css but try this:

In your css file you have:

#content_main{
clear:both;background:#E8EFDF;border: 1px solid #aaaa80;
padding: 10px; height:400px; width:690px;float:left;}

I modified this (on my PC!) to:

#content_main{
clear:;background:#E8EFDF;border: 1px solid #aaaa80;
padding: 10px; width: 680px ;float:left;}

Seeing that the width of the body was specified elsewhere in your css as
700px, all I do then is subtract the combined width of the left and
right padding.

Secondly, I have no idea why you need to specify a height for
#content_main. If you remove it, there is no change to the page in
Opera or IE, but Firefox renders it as you would expect.

Still not perfect though. There may well be other conflicts elsewhere,
but Firefox is improved.

Ed

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2005

div overlap