Div heights...

Hi...

I have a problem where a nested <div> isn't changing the height of its
parent div. I have a parent div which contains a child div and some text.
The child div is a box to hold a list of thumbnail images. If the thumbnail
div has several images in it, it overflows the parent div. How can I make
this div affect the height of the parent div?


I have the following HTML:

<div>
<h3>Some title or other...</h3>
<div class="thumbnails">
<p><img src="images/images/thumb_page_02_01_01.jpg" alt=""
width="75" height="51" border="0"></p>
<p><img src="images/images/thumb_page_02_01_02.jpg" alt=""
width="75" height="49" border="0"></p>
<p><img src="images/images/thumb_page_02_03_01.jpg" alt=""
width="75" height="110" border="0"></p>
<p><img src="images/images/thumb_page_02_01_01.jpg" alt=""
width="75" height="51" border="0"></p>
<p><img src="images/images/thumb_page_02_01_02.jpg" alt=""
width="75" height="49" border="0"></p>
<p><img src="images/images/thumb_page_02_03_01.jpg" alt=""
width="75" height="110" border="0"></p>
</div>
Some text for people to read... Some text for people to read... Some
text for people to read... Some text for people to read... Some text for
people to read... Some text for people to read... Some text for people to
read... Some text for people to read... Some text for people to read... Some
text for people to read... Some text for people to read... Some text for
people to read... Some text for people to read... Some text for people to
read...
</div>


And the following stylesheet:

div.thumbnails {
float : right;
}

div.thumbnails p {
margin : 5px 0 5px 0;
}

The Plankmeister wrote:

Hi...

I have a problem where a nested <div> isn't changing the height of its
parent div. I have a parent div which contains a child div and some text.
The child div is a box to hold a list of thumbnail images. If the thumbnail
div has several images in it, it overflows the parent div. How can I make
this div affect the height of the parent div?

[...]

div.thumbnails {
float : right;
}

float takes the block from the normal flow, so that it is nor relevant
for the calculation of the parent block's height. You should add a block
with 'clear: right' after the floated divs.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

The Plankmeister wrote:

I have a problem where a nested <div> isn't changing the height of its
parent div.

div.thumbnails {
float : right;
}

http://www.complexspiral.com/publica...aining-floats/

--
David Dorward http://dorward.me.uk/

http://www.complexspiral.com/publica...aining-floats/

That is precisely what I was after. A thousand thankyous!


P.

I'm having a bit of trouble getting a zero-height "clearer", even with
Eric's article. Have a look at the "Next event" sidebar in www.kpuc.org/ .
Since the description is shorter than the floated calendar-style date, I
need to use the "clear" trick to force the "Next event" div's height to take
the calendar date into account.

However, I'd like the cleared element to be as small as possible. (See
border on element, for debugging purposes) I've tried:

clear: both;
height: 0;
line-height: 0;
font-size: 0;

and it *still* has a height! (At least in IE6. Hint: the height varies
according to the browser's default font size.)

What are you using to get a cleared div as close to invisible as can be?
Thanks.

Brian wrote:

Charles Blaquière wrote:
However, I'd like the cleared element to be as small as possible.
(See border on element, for debugging purposes) I've tried:

clear: both;
height: 0;
line-height: 0;
font-size: 0;

and it *still* has a height! (At least in IE6. Hint: the height
varies according to the browser's default font size.)

What are you using to get a cleared div as close to invisible as can
be?


visability: none?

No, if I set "display: none", the cleared div is removed from the flow and
the main div shrinks back down to a height smaller than the div.

Brian wrote:

Charles Blaquière wrote:
However, I'd like the cleared element to be as small as possible.
(See border on element, for debugging purposes) I've tried:

clear: both;
height: 0;
line-height: 0;
font-size: 0;

and it still has a height! (At least in IE6. Hint: the height
varies according to the browser's default font size.)

What are you using to get a cleared div as close to invisible as can
be?


visability: none?

No, if I set "display: none", the cleared div is removed from the flow and
the main div shrinks back down to a height smaller than the floated div.

Brian wrote:

Charles Blaquière wrote:

No, if I set "display: none", the cleared div is removed from the
flow and the main div shrinks back down to a height smaller than
the floated div.

not display: none. visability, which creates a box in the flow, but
makes that box invisible.

Ah, OK. Visibility. (I normally don't dare venture into CSS2 territory B^)

It seems to work, but there's still a lot of empty space at the bottom. Let
me go back to the cascade and try to compute what, exactly, is the result of
various margin/padding/border settings in the hierarchy, along with the IE
broken box model. Thanks.

OK, I tried everything and still can't get rid of extra height from the
clearer div.

URL: http://www.kpuc.org/ (See "Next event" div in right column)

- Floated (calendar-style) div and clearer div have been given a dashed
border for easier debugging.

- HTML, slightly simplified (removed details from floated div, which is not
the problem here; View Source if you do want to see all the details):

<div class="Sidebar">
<h1>Next event</h1>
<!-- Calendar-style date --><div class="FloatLeft AccentBackground"
[...]> [...] </div>
<p><a href="/events/upcoming.html">Blessing of the animals</a></p>
<div class="FlowFloat" style="border: 1px dashed #ddd; margin: 0;
padding: 0; visibility: visible;"></div>
</div>

(I tried adding inline margin & padding=0 in case they somehow weren't
inherited properly -- my style sheet includes global properties for all divs
in a sidebar, which include *some* padding and/or margin. Also, visibility:
visible is for debugging -- invisible doesn't remove the ~dozen pixel in
height inside the div.)

- CSS for clearer div:

FlowFloat {
/* Used at the bottom of any block-level element containing a float,to
ensure the element's height takes the float into account (remember:
floats are not part of the normal flow) */
clear: both;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
}

So, I don't know what to do to get rid of the clearer div's content height.
Any advice? Thanks!

Hrrm. It seems I've hit on an "interesting behaviour". My spurious height
was a 1em line box. To get it to collapse, I had to put some text, any text,
(I used &nbsp inside the div. If the div was empty, IE would not recognize
line-height.

My other problem was inheritance-related: the cleared div inherits a 125%
line-height from its ancestors, and it would only go down to zero if I coded
"line-height: 0" inside the div tag itself. I'll need to go back to my style
sheet and debug the cascade to see why "line-height: 0" on the .FlowFloat
has no effect. At least, I'm relieved to see that this is my fault, not yet
another browser bug to commit to memory.

(Code snippets in previous post don't reflect current code at kpuc.org, BTW.
Lots of fiddling around this morning.)

Brian, thanks for your help.