dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: FF not expanding container div

  1. #1
    Join Date
    Jun 2007
    Posts
    5

    FF not expanding container div

    All the divs are relative or default position... This is just a practice run...

    I want the container to expand with the content if more text is added.

    Here is the 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>
    <title>Untitled Page</title>
    <link rel="stylesheet" href="build1.css" type="text/css" />
    </head>
    <body>

    <div id="shell" align="center">

    <div id="container" align="left">

    <div class="header" id="header"></div>

    <div id="contentcontainer">

    <div id="left" class="left">This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...</div>
    <div id="right">This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...This is text...</div>

    </div>

    </div>

    </div>

    </body>
    </html>


    CSS:

    html
    {
    height: 100%;
    }

    body
    {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: Gray;
    }

    #shell
    {
    position: relative;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    }

    #container
    {
    position: relative;
    top:0px;
    left:0px;
    width: 780px;
    height: 100%;
    background-color: #FFFFFF;
    }

    #header
    {
    position:relative;
    top:0px;
    left:0px;
    }

    div.header
    {
    border:10px solid;
    padding:50px;
    background: #ffc;
    clear: both;
    }

    div.header
    {
    height: 200px;
    width:780px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 660px;
    }

    html>body .header
    {
    width:660px;
    }

    #contentcontainer
    {
    margin-top: 10px;
    height: 100%;
    }

    #left
    {
    margin-left: 10px;
    margin-top: 10px;
    float: left;
    border:10px solid black;
    padding:0px;
    background: #ffc;
    }

    #right
    {
    float: right;
    width: 470px;
    border:10px solid black;
    padding:0px;
    background: #ffc;
    margin-right: 10px;
    margin-top: 10px;
    }

    div.left
    {
    width: 250px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 210px;
    }

    html>body> .left {
    width:210px;
    }

    Thanks!

    Scott
    Last edited by scottpoliseno; 07-18-2007 at 04:03 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    #contentcontainer
    {
    margin-top: 10px;
    height: 100%;
    }

    is 100% of the user's browser's height. Try "auto" instead. That way, it will 'auto-expand' as more height is required.

    Some good lorem ipsum dolar would look better to actually beta-test the container with something that could possibly be real...

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
    Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
    mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
    metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
    lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
    turpis at erat.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    Last edited by WebJoel; 07-18-2007 at 05:43 PM.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    As the last div inside the #container put
    <div style="clear:both"></div>
    and see if that's not what you're looking for. Floated divs do not "push" against their containers.

Thread Information

Users Browsing this Thread

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

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