assorted misbehaviours around float: left

[Chris Sharman]

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

essentially it's just a list of links.

I've split it into two columns with a floated left div, and therein lie
the problems.

It's valid 4.01 strict, but none of ie, moz, or ff correctly offset the
right div - it overlaps the longest line on the left (CCA External Web
Site Statistics Reports).

On moz & ff, fortuitous indentation on the right prevents actual
overlaying of text; but they have a spurious linefeed at the top of the
left div.

ie doen't have the linefeed, but doesn't do any sublist indentation on
the right for some reason, so the text is overprinted.

Have I done something stupid, or does this page really demonstrate
multiple bugs in all major browsers ?

I originally had one master <ul> with the left & right divs inside it,
but I suspected that was illegal, so I made it one <ul> in each div.

As I say, I've moved the page to the www for you to see, so I know about
the broken links.

Thanks
Chris

[Chris Sharman]

Chris Sharman wrote:

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

essentially it's just a list of links.

I've split it into two columns with a floated left div, and therein lie
the problems.

It's valid 4.01 strict, but none of ie, moz, or ff correctly offset the
right div - it overlaps the longest line on the left (CCA External Web
Site Statistics Reports).

On moz & ff, fortuitous indentation on the right prevents actual
overlaying of text; but they have a spurious linefeed at the top of the
left div.

ie doen't have the linefeed, but doesn't do any sublist indentation on
the right for some reason, so the text is overprinted.

Have I done something stupid, or does this page really demonstrate
multiple bugs in all major browsers ?

I originally had one master <ul> with the left & right divs inside it,
but I suspected that was illegal, so I made it one <ul> in each div.

As I say, I've moved the page to the www for you to see, so I know about
the broken links.
Yet to master follow-ups. Sorry.
Thanks
Chris

[Chris Sharman]

Danny@Kendal wrote:

"Chris Sharman" <ch***********@sorry.nospam> wrote in message

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

I've split it into two columns with a floated left div, and therein lie
the problems.
Float *both* main <div> elements.

Thanks - that fixes it (although I now get the extra blank line at the
top of both divs).
But why ?
I thought a straight unstyled div should just abut the existing floated
left div, if there's room ?
Add style="clear:both" to the third <div> element if you want it to appear beneath them.

Yes, better, and necessary now the second's floating too.
Posted at dtest2.html.

Thanks,
Chris

[Gus Richter]

Chris Sharman wrote:

Danny@Kendal wrote:

"Chris Sharman" <ch***********@sorry.nospam> wrote in message

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

I've split it into two columns with a floated left div, and therein lie
the problems.

Float *both* main <div> elements.

Thanks - that fixes it (although I now get the extra blank line at the
top of both divs).
But why ?
I thought a straight unstyled div should just abut the existing floated
left div, if there's room ?

> Add style="clear:both" to the third <div> element if you want it to

appear

> beneath them.

Yes, better, and necessary now the second's floating too.
Posted at dtest2.html.

In your page, the best method to render in Moz/FF and IE alike is
probably to float:left; both divs as suggested with a clear:left; on the
following HR element.
Place borders around your divs to see that the margins are coming from
H2's margin-bottom and from UL's margin-top. Alter them as needed.

Here is an explanation of what was happening in your code.
Moz/FF follow the rules but not IE.

The left div is floated, so is out of the flow and sets at the point of
H2's margin-bottom.
The right div has a margin-top just as H2 has a margin-bottom and they
are collapsed whereby the smallest value is dropped. Hence the
difference of points of reference for the two divs.

The three solutions are:
1. Set H2's margin-bottom to zero to abut the H2 and float boxes, or
2. Add a border to the right div to prevent H2's margin-bottom
and the right div's margin-top from collapsing, or
3. Add padding-top to the right div to prevent H2's margin-bottom
and the right div's margin-top from collapsing.

Also add margin-left:300px; to the right div in order to clear the
list markers which are outside of the box.
Another thing is that IE doesn't do things right, so not the same.

--
Gus

[Chris Sharman]

Gus Richter wrote:

Place borders around your divs to see that the margins are coming from
H2's margin-bottom and from UL's margin-top. Alter them as needed.

Here is an explanation of what was happening in your code.
Moz/FF follow the rules but not IE.

The left div is floated, so is out of the flow and sets at the point of
H2's margin-bottom.
The right div has a margin-top just as H2 has a margin-bottom and they
are collapsed whereby the smallest value is dropped. Hence the
difference of points of reference for the two divs.

Now I get it - thanks very much

Chris