Re: Problems with margins, paddings, divs and floats! PLEASE HELP!

On 2007-05-09, Agix <ignoranceisbliss@xxxxxxxxx> wrote:
HI there,

I am fairly new to web coding, not so new I don't know what tags are
or anything that basic, but new enough to be frustrated by obstacles
that trying to use multiple browsers is causing and not knowing the
way round it.

Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
per sé, but more for an explanation of why I see this behaviour - my
experienced friend coder doesn't seem to understand my plight.

I have even include a link to the offending page
http://www.clarifysolutions.co.uk/certenroll/
[...]
If you take a look at particularly "#mainpageset" this is a div tag
container for the entire page contents. It has it's width set to
560px.

Notice how I have set EVERY id and class to have margin AND padding =
0px. This is so I can work out how the browser is behaving.

Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
160px respectively in width.

If you take a look at the link in Firefox - it renders ok, but messes
up a fair bit.

What's wrong with it?

In IE6+7 it looks plain awful. What I am really annoyed about is that
the two divs, no margins or paddings but they still overlap!!!!

Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
does the browser not follow mathematics?

Firefox is following mathematics OK here.

400px + 160px + 2px + 2px = 564px.

Each 2px is for the left and right borders of mainpagecont and
adbarright.
.

Relevant Pages