Div auto height

Consider the following HTML:

<div class="links">
<img src="linkimages/logo.gif">
<h2>title</h2>
<span><a target="_blank" href="http://">http://</a></span>
<p>description of link</p>
</div>

I have the following CSS:
div.links {
width:auto;
margin:8px;
margin-bottom:13px;
border-bottom:1px solid;
}
div.links h2 {font-size:110%;text-align:left;}
div.links span a{text-align:left;font-weight:bold;}
div.links p{text-align:left;font-size:80%;}
div.links img {float:left;padding:0px 10px 0px 0px;}

Now in my HTML I have plenty of <div class="links"> the one under another.

If the image is big and the description short then the image extends
outside the div. How can I overcome this behavior and have a div that
extends at 100% of the necessary height? (i have already tried
height:auto with no luck)

thanks

On 2006-12-29, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Consider the following HTML:

div class="links"
img src="linkimages/logo.gif"
h2>title</h2
span><a target="_blank" href="http://">http://</a></span
p>description of link</p
/div

I have the following CSS:
div.links {
width:auto;
margin:8px;
margin-bottom:13px;
border-bottom:1px solid;
}
div.links h2 {font-size:110%;text-align:left;}
div.links span a{text-align:left;font-weight:bold;}
div.links p{text-align:left;font-size:80%;}
div.links img {float:left;padding:0px 10px 0px 0px;}

Now in my HTML I have plenty of <div class="links"> the one under another.

If the image is big and the description short then the image extends
outside the div. How can I overcome this behavior and have a div that
extends at 100% of the necessary height? (i have already tried
height:auto with no luck)

height: auto is what they are already, and divs don't grow in height to
contain floats that overflow them[1]

We want the bottom border to clear the floats. We can achieve this by
making the bottom border an element in itself, and setting clear on it.

So if you change your margin on .links to

margin:8px 8px 0 8px;

i.e. all 8px except bottom (unless I got the order wrong there).

and then create a new selector:

div.separator
{
border-bottom: 1px solid;
margin-bottom:13px;
clear: left;
}

Then after each <p>description</p> add

<div class="separator"></div>

in the content.

[1] divs _do_ grow to contain the divs inside them if they are
themselves the "block formatting context boxes" for the floats, which
they are if they are floated or positioned themselves.

So we can fix this another way without moving the borders to extra
separating divs by adding this to div.links:

float: left;
clear: left;
width: 100%;

Ben C wrote:

On 2006-12-29, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:
Consider the following HTML:

div class="links"
img src="linkimages/logo.gif"
h2>title</h2
span><a target="_blank" href="http://">http://</a></span
p>description of link</p
/div

I have the following CSS:
div.links {
width:auto;
margin:8px;
margin-bottom:13px;
border-bottom:1px solid;
}
div.links h2 {font-size:110%;text-align:left;}
div.links span a{text-align:left;font-weight:bold;}
div.links p{text-align:left;font-size:80%;}
div.links img {float:left;padding:0px 10px 0px 0px;}

Now in my HTML I have plenty of <div class="links"> the one under another.

If the image is big and the description short then the image extends
outside the div. How can I overcome this behavior and have a div that
extends at 100% of the necessary height? (i have already tried
height:auto with no luck)


[1] divs _do_ grow to contain the divs inside them if they are
themselves the "block formatting context boxes" for the floats, which
they are if they are floated or positioned themselves.

So we can fix this another way without moving the borders to extra
separating divs by adding this to div.links:

float: left;
clear: left;
width: 100%;

yes it works thanks.
But I would like to clear this out a bit. How float affects div's
height? I thought float is used to position -maybe not the right word
here, forgive my english- the element to its parent element.

On 2006-12-29, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Ben C wrote:
[snip]
[1] divs _do_ grow to contain the divs inside them if they are
themselves the "block formatting context boxes" for the floats, which
they are if they are floated or positioned themselves.

So we can fix this another way without moving the borders to extra
separating divs by adding this to div.links:

float: left;
clear: left;
width: 100%;

yes it works thanks.
But I would like to clear this out a bit. How float affects div's
height? I thought float is used to position -maybe not the right word
here, forgive my english- the element to its parent element.

Yes it is. But a float also "establishes a new block formatting
context", which means it grows to fit the floats inside it in.

In this case the float doesn't actually visibly float to the left itself
because we make it width: 100%. We make it float:left not to make it
float to the left, but just to get the sideffect of starting a new block
formatting context.

Normally floats overflow their containers. This is so you can write
content like this:

<p> text blah blah <img style="float: right;" src="foo.png"> </p>
<p> more text blah blah blah </p>

In this example, if the first paragraph grew to fit the float in,
there'd be a vertical gap between the two paragraphs. This is less
desirable than the second paragraph starting in its proper place,
immediately below the first paragraph, but also flowing around the
float.

So that's why the float overflows its containing box. But it doesn't
overflow its block formatting context box.

CSS 2.1 9.4.1:

"Floats, absolutely positioned elements, inline-blocks, table-cells, and
elements with 'overflow' other than 'visible' establish new block
formatting contexts."

And then in CSS 2.1 10.6.7 ("'Auto' heights for block formatting context
roots"):

"In addition, if the element has any floating descendants whose bottom
margin edge is below the bottom, then the height is increased to include
those edges. Only floats that are children of the element itself or of
descendants in the normal flow are taken into account, e.g., floats
inside absolutely positioned descendants or other floats are not."

Why these extra rules?

One possible reason is to make the implementation easier. Floats are
already harder to implement than most things in CSS because text in
sibling, descendent, or descendent-of-sibling blocks has to be flowed
around them. This introduces extra complexity by breaking the assumption
that you can make almost everywhere else that the layout of an element
is only affected by its ancestors and descendents. If you can keep
floats inside their block formatting contexts however, you can limit
that complexity a bit.

Harris Kosmidhs wrote:

div.links img {float:left;padding:0px 10px 0px 0px;}

If the image is big and the description short then the image extends
outside the div. How can I overcome this behavior and have a div that
extends at 100% of the necessary height?

http://www.quirksmode.org/css/clearing.html

--
Berg