Stylesheets - div overlap

Author

div overlap

erwan@barzhoneg.com

2005-11-29, 6:50 pm

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

Danny@Kendal

2005-11-29, 6:50 pm

<erwan@barzhoneg.com> wrote in message
news:1133271491.340014.237530@g44g2000cwa.googlegroups.com...

> 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.

2005-12-23, 6:34 pm

erwan@barzhoneg.com wrote:
> 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
>

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