Strange cross linking of div heights.

[Alan Chandler]

Earlier in the week I posted a problem with the height of a div in the
first row of a table I was constructing using tapestry as an the engine
generating the html. This problem was across a range of browsers.

Nobody was able to help me because I couldn't post a URL

I have managed to isolate the problem in some static html, but I don't
understand why it occurs.

The following two url's illustrate it.

http://www.chandlerfamily.org.uk/famtree/test.html

shows what I am trying to achieve, but without a left hand panel.

Adding in the left hand panel somehow interacts with an internal div of
the right hand panel - see

http://www.chandlerfamily.org.uk/famtree/test2.html

which shows the bottom of the nested internal div (of class "spouse")
somehow interacting with the bottom of div #menuapps.

This is causing the first div of class spouse to somehow be extended.

The only possible linkage that I can see is through the clearfix class,
but I don't understand why. Can someone give me an explanation so that
I can have a clue as how to avoid it.

Thanks.

(css is at http://www.chandlerfamily.org.uk/famtree/chandler.css )

[Jim Moe]

Alan Chandler wrote:

I have managed to isolate the problem in some static html, but I don't
understand why it occurs.

The "clearfix" class did not really address the problem. Remove all of
the "clearfix" classes. They are useless for your example.
The difficulty you are having is that you float:left nearly everything
in a "family" div, leaving the div with essentially no content. Thus the
div height collapses to a minimum value determined by padding and margin.
The same thing occurs for non-floated divs that do not have any content.

Add   to each div that does not have any content besides other
floated divs, or non-floated divs (e.g., "children") with no content.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Chandler]

Jim Moe wrote:

Alan Chandler wrote:

I have managed to isolate the problem in some static html, but I don't
understand why it occurs.

The "clearfix" class did not really address the problem. Remove all of
the "clearfix" classes. They are useless for your example.
The difficulty you are having is that you float:left nearly everything
in a "family" div, leaving the div with essentially no content. Thus the
div height collapses to a minimum value determined by padding and
margin. The same thing occurs for non-floated divs that do not have any
content.

Add   to each div that does not have any content besides other
floated divs, or non-floated divs (e.g., "children") with no content.

I actually managed to get a css solution from another mailing list. The
issue is the .clearfix:after selectors clear:both property. Apparently
(I don't understand why - but it works) adding an overflow: property
solves it. I am trying to get a fuller explanation from that list.

But I take your point. I originally put the clearfix solution in as a
matter of principal - but its proving more trouble that its worth, and
essentially making my css extremely difficult to understand. I think I
will try and add the padding in via &nbsp in the code as you suggest.

[Alan Chandler]

Alan Chandler wrote:

Jim Moe wrote:

Add   to each div that does not have any content besides other
floated divs, or non-floated divs (e.g., "children") with no content.

I actually managed to get a css solution from another mailing list. The
issue is the .clearfix:after selectors clear:both property. Apparently
(I don't understand why - but it works) adding an overflow: property
solves it. I am trying to get a fuller explanation from that list.

But I take your point. I originally put the clearfix solution in as a
matter of principal - but its proving more trouble that its worth, and
essentially making my css extremely difficult to understand. I think I
will try and add the padding in via &nbsp in the code as you suggest.

Unfortunately it doesn't work.

The embedded floating divs sometimes wordwrap (depends on browser window
width) and get a height that is greater than one line. The   only
makes the surrounding div one line high, which in these cases is not enough.

I am still going to have to put a clear property in somehow.

[Jim Moe]

Alan Chandler wrote:

Unfortunately it doesn't work.

The embedded floating divs sometimes wordwrap (depends on browser window
width) and get a height that is greater than one line. The   only
makes the surrounding div one line high, which in these cases is not
enough.

Because many, but not all, of the divs are floated, you are going to
have this problem; a div without actual content always collapses. Attempts
to work around it only aggravates the problem and creates a maintenance
nightmare.
You are displaying tabular data. Is there some reason why you are not
using tables?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)