Previous Message
Next Message

Min-height in IE

Sent by Michael Landis on 1 January 2004 02:02


Bruce wrote:

> OK, this is most probably a well-known hack but not to me. I want to
> absolutely position an object at the left bottom of the container. But
> the container may vary in height, and if it is small this object
> overlaps another floated at the top left. Solution seemed to be
> min-height. Fine in the Gecko, but IE does not recognize this for a
> div. So, give the object an actual height, a fix I found on the net.
> Works for IE, and if the container grows then the object moves down to
> the new bottom. But in the Gecko, that height is fixed - added content
> lets the container grow all right, to hold the content, but the
> absolute positioned object does not move down to new bottom..

This might be tricky. IE Mac also creates fixed-height containers, like
Gecko browsers. If you float right a 1px-wide element of the proper height,
and add a clearing div below your content (or float the relative container,
if it makes sense), then you can ensure that the container will at least be
that high. Something like

<div id="content">
  <div id="image"></div>
  <div id="spacer"></div>
  ... content ...
  <div class="clear"></div>
</div>

#content {
  position: relative;
  min-height: (whatever height this should be);
}

#image {
  position: absolute;
  left: 0;
  bottom: 0;
  ...
}

#spacer {
  float: right;
  width: 1px;
  height: (whatever height this should be);
}

..clear {
  clear: both;
}

In a way, this is kind of like using a fixed-width div inside a container
to emulate min-width.

HTH,

MikeL

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: