CSS problem

Discussion in 'HTML' started by mike, Oct 3, 2006.

  1. mike

    mike Guest

    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?
     
    mike, Oct 3, 2006
    #1
    1. Advertising

  2. mike

    Ben C Guest

    On 2006-10-03, mike <> 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.
     
    Ben C, Oct 3, 2006
    #2
    1. Advertising

  3. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 3, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    788
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    501
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    478
    Bertilo Wennergren
    Dec 10, 2003
  4. Noozer
    Replies:
    10
    Views:
    2,247
    Mitja
    Oct 13, 2004
  5. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    689
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
Loading...

Share This Page