How to make a container grow to fit div boxes?

Discussion in 'HTML & Website Design' started by AustiniteProgrammer, Jan 30, 2012.

0
  1. #1
    Hi, I am developing a website and have a background color and then an inside container that is white. Right now the container is a set height and width, and I'd like for the container to grow to fit the div boxes on each page. I have tried taking out the min-height, adding a max-height of 100%, and added a clearing tag. I have been unsuccessful in getting any of these to work, and it may be due to where I am placing the tags...? Any help is appreciated!

    Here is part of my CSS Stylesheet for the template on all of my pages. Sorry for the length...
    
[SIZE=1]body {[/SIZE]
[SIZE=1]    padding: 20px;[/SIZE]
[SIZE=1]    background: #095c9c;[/SIZE]
[SIZE=1]    font-size: 10px;[/SIZE]
[SIZE=1]    line-height: 18px;[/SIZE]
[SIZE=1]    color: #333;[/SIZE]
[SIZE=1]    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;[/SIZE]
[SIZE=1]    margin-bottom: 50px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 13, 2011 */[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]@font-face {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSBold';[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-bold-webfont.eot');[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-bold-webfont.eot?iefix') format('eot'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-bold-webfont.woff') format('woff'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-bold-webfont.ttf') format('truetype'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-bold-webfont.svg#webfontPXxjSwgW') format('svg');[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    font-style: normal;[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]@font-face {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSBoldExtended';[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-boldext-webfont.eot');[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-boldext-webfont.eot?iefix') format('eot'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-boldext-webfont.woff') format('woff'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-boldext-webfont.ttf') format('truetype'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-boldext-webfont.svg#webfont8Hp7Ry3x') format('svg');[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    font-style: normal;[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]@font-face {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSExtended';[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-ext-webfont.eot');[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-ext-webfont.eot?iefix') format('eot'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-ext-webfont.woff') format('woff'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-ext-webfont.ttf') format('truetype'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-ext-webfont.svg#webfonts0lvPpX5') format('svg');[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    font-style: normal;[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]@font-face {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSRegular';[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-regular-webfont.eot');[/SIZE]
[SIZE=1]    src: url('type/engraversgothic-regular-webfont.eot?iefix') format('eot'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-regular-webfont.woff') format('woff'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-regular-webfont.ttf') format('truetype'),[/SIZE]
[SIZE=1]         url('type/engraversgothic-regular-webfont.svg#webfontz2klY0Lv') format('svg');[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    font-style: normal;[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]/* container----------------------------------- */[/SIZE]
[SIZE=1]#container {[/SIZE]
[SIZE=1]    width: 900px;[/SIZE]
[SIZE=1]    min-height: 700px;[/SIZE]
[SIZE=1]    overflow:inherit;[/SIZE]
[SIZE=1]    padding: 0;[/SIZE]
[SIZE=1]    margin: 40px  auto;[/SIZE]
[SIZE=1]    background-color: #ffffff;[/SIZE]
[SIZE=1]    margin-top: 0;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]a:link {[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]    text-decoration: none;[/SIZE]
[SIZE=1]    font-weight: bold;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]a:hover, a:focus, a:active {[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]    text-decoration: underline;[/SIZE]
[SIZE=1]    font-weight: bold;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]a:visited {[/SIZE]
[SIZE=1]    text-decoration: none;[/SIZE]
[SIZE=1]    text-weight: normal;[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]ul {    [/SIZE]
[SIZE=1]    line-height: 18px;[/SIZE]
[SIZE=1]    margin: 0;[/SIZE]
[SIZE=1]    padding: 0;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]h1, h2, h4 {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSRegular',Arial, Helvetica, sans-serif;[/SIZE]
[SIZE=1]    margin-top: 0;[/SIZE]
[SIZE=1]    margin-bottom: 5px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]h1 + p, h2 + p  {[/SIZE]
[SIZE=1]    margin-top: 0;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]h1{[/SIZE]
[SIZE=1]    font-size: 16px;[/SIZE]
[SIZE=1]    font-weight: bold;[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]h2{[/SIZE]
[SIZE=1]    font-size: 16px;[/SIZE]
[SIZE=1]    font-weight: bold;[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]h3{[/SIZE]
[SIZE=1]    font-size: 12px;[/SIZE]
[SIZE=1]    font-weight: bold;[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]    text-align: center;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]p {    [/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]       color: #095c9c;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].journal {[/SIZE]
[SIZE=1]    font-size: 10px;[/SIZE]
[SIZE=1]    padding-bottom: 10px;[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    padding-left: 10px;[/SIZE]
[SIZE=1]    text-align:right;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].aside {[/SIZE]
[SIZE=1]    font-size: 9px;[/SIZE]
[SIZE=1]    font-style: italic;[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    padding-left: 10px;[/SIZE]
[SIZE=1]    text-align:left;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].aside2 {[/SIZE]
[SIZE=1]    font-size: 9px;[/SIZE]
[SIZE=1]    font-style: italic;[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    padding-left: 10px;[/SIZE]
[SIZE=1]    text-align:center;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]#sidebar li {[/SIZE]
[SIZE=1]    font-family: 'EngraversGothicFSRegular',Arial, Helvetica, sans-serif;[/SIZE]
[SIZE=1]    text-align: right;[/SIZE]
[SIZE=1]    color: #095c9c;[/SIZE]
[SIZE=1]    list-style: none;[/SIZE]
[SIZE=1]    font-size: 16px;[/SIZE]
[SIZE=1]    margin: 0;[/SIZE]
[SIZE=1]    padding: 0;[/SIZE]
[SIZE=1]    margin-bottom: 3px;[/SIZE]
[SIZE=1]    padding-bottom: 3px;[/SIZE]
[SIZE=1]    width: 170px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]#sidebar li a:link {[/SIZE]
[SIZE=1]    font-weight: normal;[/SIZE]
[SIZE=1]    width: 168px;[/SIZE]
[SIZE=1]    display: block;[/SIZE]
[SIZE=1]    padding-right: 2px;[/SIZE]

[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]#sidebar li a:hover {[/SIZE]
[SIZE=1]    background: #f2f2f2;[/SIZE]
[SIZE=1]    text-decoration: none;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]#sidebar li.current_page_item a:link, #sidebar li.current_page_item a:hover {[/SIZE]
[SIZE=1]    background: #eaf3f9;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE][SIZE=1]/* content ----------------------------------- */[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]#columnone {[/SIZE]
[SIZE=1]    position: absolute;[/SIZE]
[SIZE=1]    width: 300px;[/SIZE]
[SIZE=1]    margin-top: 40px;[/SIZE]
[SIZE=1]    margin-left: 210px;[/SIZE]
[SIZE=1]    height: 100%;[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]#columntwo{[/SIZE]
[SIZE=1]    position: absolute;[/SIZE]
[SIZE=1]    width: 300px;[/SIZE]
[SIZE=1]    margin-top: 40px;[/SIZE]
[SIZE=1]    margin-left: 520px;[/SIZE]
[SIZE=1]    height: 700px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]#cross {[/SIZE]
[SIZE=1]    position: absolute;[/SIZE]
[SIZE=1]    margin-top: 270px;[/SIZE]
[SIZE=1]    margin-left: 421px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].topbox {[/SIZE]
[SIZE=1]    height: 300px;[/SIZE]
[SIZE=1]    padding: 0;[/SIZE]
[SIZE=1]    background-color: #eaf3f9;[/SIZE]
[SIZE=1]    border: none;[/SIZE]
[SIZE=1]    overflow:hidden;[/SIZE]
[SIZE=1]    text-align: right;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].bottombox {[/SIZE]
[SIZE=1]    margin-top: 10px;[/SIZE]
[SIZE=1]        height: 300px;[/SIZE]
[SIZE=1]    background-color: #eaf3f9;[/SIZE]
[SIZE=1]    border: none;    [/SIZE]
[SIZE=1]    overflow:hidden;[/SIZE]
[SIZE=1]    text-align: right;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1].ui-dialog ul {[/SIZE]
[SIZE=1]    margin-left: 20px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]#insurance .bottombox {[/SIZE]
[SIZE=1]    height: 450px;[/SIZE]
[SIZE=1]    background-color: #eaf3f9;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].copy_right {[/SIZE]
[SIZE=1]        padding-top: 25px;[/SIZE]
[SIZE=1]    padding-left: 35px;[/SIZE]
[SIZE=1]    padding-right: 25px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].copy_left {[/SIZE]
[SIZE=1]        padding-top: 25px;[/SIZE]
[SIZE=1]    padding-left: 25px;[/SIZE]
[SIZE=1]    padding-right: 35px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]
[/SIZE]
[SIZE=1].topbox .copy_right, .topbox .copy_left {[/SIZE]
[SIZE=1]    padding-top: 25px;[/SIZE]
[SIZE=1]}
    Code (markup):
    [/SIZE]

    Here is the HTML/PHP for one of the pages that I need the container to grow on:
    
get_header(); ?>


<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 class="clear"></div>
            </div>
    <div class="clearall"></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();?>
    Code (markup):
    This is the web address for the site...
    http://www.catholicfamilyfraternaloftexas.org

    Thanks
     
    Last edited: Jan 30, 2012
    AustiniteProgrammer, Jan 30, 2012 IP
  2. designindia

    designindia Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <div id="wrapper">
    <div id="header-wrapper">
    <header>
    <div id="logo-bar"></div>
    </header>
    <nav></nav>
    </div>
    <div id="content"></div>
    </div>


    <div id="footer-wrapper">
    <footer></footer>
    </div>
     
    designindia, Feb 21, 2012 IP