Posted by Ben C on 10/03/06 18:23

On 2006-10-03, mike <mike@netadv.net> wrote:
> I am designing a page, and have never really used css before (I am
> actually updating a page that someone else designed to be more
> specific). I have one div nested inside another. Both have height set
> to auto in the css. The inside div has the height of it's text. I
> want the outside (container) div to have the height of the child, but I
> can't get it to work that way. For example in my style.css I have:
>
> div#picture_frame_Joseph
> {
> width: 700px;
> height: auto;
> position: absolute;
> left: 50px;
> top: 105px;
> border: solid 2px black;
> }
>
> div#bodyJoseph
> {
>
> width: 800px;
> height: auto;
> }
>
> then in my html file I have included the style.css and I have this in
> the body:
><div id="bodyJoseph">
> <div id="picture_frame_Joseph">
> *******Lots of text************
> </div>
></div>
>
> When it displays, the picture_frame_Joseph div is the correct height,
> but the bodyJoseph div is just a small box. It should be at least the
> size of the picture_frame_Joseph div. Any suggestions?

Move the position: absolute, left and top properties from
picture_frame_Joseph to bodyJoseph.

At the moment, picture_frame_Joseph is "in the normal flow", but
bodyJoseph isn't. The height of its normal-flow descendents is zero
which is why it has zero height.

So position the frame instead, and have the picture as a normal-flow
child of the frame.

[Back to original message]