www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS layer auto height "Layer size wont grow to child layer size "

  1. #1
    Join Date
    Oct 2003
    Posts
    69

    CSS layer auto height "Layer size wont grow to child layer size "

    Hi

    I've got a similar problem to this person: http://www.webdeveloper.com/forum/sh...ad.php?t=84830 - unfortunately he solved the problem himself but didn't post the solution!

    I've got a file to show you what I am trying to do here: http://www.cinnamonjunkie.com/test.html

    Source:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #container{
    height:auto;
    background:#eee;
    position:relative;
    height:auto;
    
    }
    
    #content{
    width:500px;
    position:absolute;
    left:100px;
    top:50px;
    
    }
    </style>
    </head>
    
    <body>
    <div id="container"><div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisl  nibh, commodo vitae, aliquet nec, scelerisque in, sapien. Duis varius  ornare massa. Mauris sed mauris eget lectus tempor varius. Vestibulum  rhoncus. Maecenas leo libero, aliquet nec, dictum sit amet, vestibulum  et, nunc. Maecenas turpis. Vestibulum pharetra purus a mi. Nullam ut  nunc. Sed elementum sem. Suspendisse aliquet odio iaculis mi. Cras  posuere arcu sit amet eros. </p>
    </div></div>
    </body>
    
    </html>
    Basically the container layer isn't extending with the content layer as intended. I thought the height: auto property would sort it out but it hasn't.

    Cheers

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What are you trying to do?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2003
    Posts
    69
    Hi,

    Apologies for not explaining myself properly.

    Ignore the link to cinnamon junkie now - I've edited that html, as I have been experimenting. The original code I've pasted above is what is important.

    I've got a container div which has certain background properties, etc, and then I've got another div which has some content, which I want to be place inside the container div. The problem is that it's not working as it would if it were say a table.

    The equivalent with tables would be that I'd have a table cell and I'd set a background property for that cell and then insert another table/cell inside that and put contents into the table/cell I just inserted. The parent cell would then expand with the contents on the table/cell inside it. For some reason I can't get this to work with CSS/divs.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    See if this is the idea:
    Code:
    body {margin:0;padding:0;}
    #container{
    background:#eee;
    width:500px;
    margin:auto;
    }
    #content{
    padding:5em;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Oct 2003
    Posts
    69
    Solved this by using the float property on the container, using margins to position it and then using a div to clear floats so that the container stretches down behind the contents.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles