CSS problem

[mike]

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?

 

[Ben C]

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.

 

[Jukka K. Korpela]

Scripsit mike:

I am designing a page, and have never really used css before

Then read a CSS tutorial or textbook.

(I am
actually updating a page that someone else designed to be more
specific).

Then you need to read another textbook, too, and practice with some CSS of
your own. Working with someone else's CSS code is much tougher than writing
good CSS from the start.

width: 700px;

It's clueless. There's probably no idea in trying to fix the design, so
don't bother posting the URL, which would in principle make it possible to
help you with it. Just leave it aside. When you know HTML and CSS well, you
might redesign the site, if it has a good purpose and useful content.