1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

container <div> dosen't expand with content

Discussion in 'CSS' started by franklin, Sep 3, 2005.

  1. #1
    A css novice here. Thanks for the help.
    SEMrush
    have a container div that i want to be a minimum height but expand if there is more content. works fine in i.e. but not expanding in foxfire.

    the real url is www.freeghana.com/scammit.php
    but i stripped out the header and footer at www.freeghana.com/junky.php for clearity.

    the relevant css is for the div i want to have expanding height is
    #container {
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	border: 0px;
    	background: #FFF;
    	overflow: visible;
    	width: 889px;
    	height: 510px; /* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	height: 480px;
    	width: 859px;
    	}
    html>body #container {
    	height: 480px; /* ie5win fudge ends */
    	width: 859px;
    	}
    Code (css):
    and basically i take the container div:

    <div id="container">
    
    --and over stuff it with things like this--
    
    <p><img src="images/spacer.gif" width=100 height=10></p>
    
    <div id="secondary_title"><a name="REPORT"></a>Report a Scam</div>
    <div id="secondary_content">Please forward all scams and fraudulent e-mails to <a href="mailto:info@freeghana.com">info@freeghana.com</a> for investigation.</div>
    
    --and then close it--
    </div>
    Code (div):
    Thanks
     
    franklin, Sep 3, 2005 IP
    Willy likes this.
    SEMrush
  2. INV

    INV Peon

    Messages:
    1,686
    Likes Received:
    101
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I had the problem with FireFox when I first started using full CSS Layouts. What you should do is remove height: 510px; from #container. If you want to have additional spaces outside you should use paddings. This way the DIV will expand according to the content in both firefox and IE.
     
    INV, Sep 4, 2005 IP
  3. programmer

    programmer Guest

    Messages:
    444
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #3
    may be removing the height property will sove your problem
     
    programmer, Sep 4, 2005 IP
  4. Macbert

    Macbert Peon

    Messages:
    27
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You need to place a clearing tag as the last thing inside the div.

    
    <div id="container">
      <p><img src="images/spacer.gif" width=100 height=10></p>
      <div id="secondary_title"><a name="REPORT"></a>Report a Scam</div>
      <div id="secondary_content">Please forward all scams and fraudulent e-mails to <a href="mailto:info@freeghana.com">info@freeghana.com</a> for investigation.</div>
    
      [B]<br style="clear:both" />[/B]
    </div>
    
    Code (div):
    This will force the div to expand with the content.
     
    Macbert, Sep 4, 2005 IP
    Willy likes this.
  5. AustiniteProgrammer

    AustiniteProgrammer Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I have the same problem with a site I am developing. I tried the above "force clearing" but I don't think I'm adding it in the right place because I can't get it to work.

    My CSS:

    /* container----------------------------------- */
    #container {
    width: 900px;
    min-height: 700px;
    overflow:inherit;
    padding: 0;
    margin: 40px auto;
    background-color: #ffffff;
    margin-top: 0;
    }
    a:link {
    color: #095c9c;
    text-decoration: none;
    font-weight: bold;
    }
    a:hover, a:focus, a:active {
    color: #095c9c;
    text-decoration: underline;
    font-weight: bold;
    }
    a:visited {
    text-decoration: none;
    text-weight: normal;
    color: #095c9c;
    }
    ul {
    line-height: 18px;
    margin: 0;
    padding: 0;
    }




    h1, h2, h4 {
    font-family: 'EngraversGothicFSRegular',Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 5px;
    }


    h1 + p, h2 + p {
    margin-top: 0;
    }
    h1{
    font-size: 16px;
    font-weight: bold;
    color: #095c9c;
    }
    h2{
    font-size: 16px;
    font-weight: bold;
    color: #095c9c;
    }
    h3{
    font-size: 12px;
    font-weight: bold;
    color: #095c9c;
    text-align: center;
    }
    p {
    font-weight: normal;
    color: #095c9c;
    }
    .journal {
    font-size: 10px;
    padding-bottom: 10px;
    font-weight: normal;
    padding-left: 10px;
    text-align:right;
    }
    .aside {
    font-size: 9px;
    font-style: italic;
    font-weight: normal;
    padding-left: 10px;
    text-align:left;
    }
    .aside2 {
    font-size: 9px;
    font-style: italic;
    font-weight: normal;
    padding-left: 10px;
    text-align:center;
    }

    My PHP:
    <div id="container">
    <div id="columnone">
    <div class="topbox">
    <img src="<?php bloginfo('template_url'); ?>/images/generations.jpg" width="300" height="300" alt="Retired Couple Hugging." />


    </div>
    <div class="bottombox">
    <div class="copy_left">
    <?php iinclude_page(88); ?>


    </div>
    </div>
    </div>


    <div id="columntwo">
    <div class="topbox">
    <div class="copy_right">
    <?php iinclude_page(86); ?>


    </div>
    </div>
    <div class="bottombox">
    <div class="copy_right">
    <?php iinclude_page(91); ?>


    </div>

    </div>

    <div id="childLifeInfo" title="Specialty Plans for Children & Seniors">
    <?php iinclude_page(119); ?>
    </div>

    <div id="adultTermInfo" title="Term Insurance">
    <?php iinclude_page(122); ?>
    </div>
    <div id="adultPermInfo" title="Permanent Insurance">
    <?php iinclude_page(127); ?>

    </div>
    </div>






    <div id="cross"><img src="<?php bloginfo('template_url'); ?>/images/cross.png" width="188" height="190" alt="K.J.Z.T. Cross" /></div>


    <?php get_sidebar();?>


    <?php get_footer();?>

    Any tips?

     
    AustiniteProgrammer, Jan 28, 2012 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Try adding max-height: 100%;

    If it doesn't work, paste the whole CSS and the whole HTML code (not bits of it in PHP) so we can see the whole thing.
     
    wiicker95, Jan 29, 2012 IP
  7. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #7
    Attaway DP posters!! Start bringing up 7-year old threads so we can all enjoy them. Give me more proof, and prove it to the world, what a wonderful group of people you are!!

    I love living in the distant past.
     
    drhowarddrfine, Jan 29, 2012 IP
  8. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #8
    AustiniteProgrammer started it.... :/ I thought I wrote him to open a new thread, but I didn't... :(
     
    wiicker95, Jan 29, 2012 IP