Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    making inner div 100 percent height

    I am trying to get an inner div to be 100 percent height.

    I have a container div that has a background which has a light blue color on left of 200 pixels wide and the remaining width is white. This expands to 100 percent height of the browser window. I am using min-height to achieve this. But when I create a new div that is inside of the the container div and try to make it expand to 100 percent height, it only expands to the height of any content that is inside of it. I tried putting 100% height on the inner div, but that doesn't work. Does anyone have any ideas of how I can accomplish this? I would like to place a small image at the bottom of the inner div, which is the reason why I want it to expand to 100 percent height like the container div.

    Thanks in advance!

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by amymcdo View Post
    I am using min-height to achieve this.
    why not try min-height again?

    Quote Originally Posted by amymcdo View Post
    I would like to place a small image at the bottom of the inner div, which is the reason why I want it to expand to 100 percent height like the container div.
    To me it sounds like one of these two would be a good solution for you.

    http://boagworld.com/technology/fixe...out-javascript
    http://ryanfait.com/sticky-footer/

    Both of these have the same end result and that is to have a div, a certain distance from the rest of the content, at the bottom of the page.
    If i was of any help, dont forget to click the 'thank' button =]

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To achieve 100% height on the inner div (or any inner div for that matter!) the containing div's need to be 100% too.

    If ch4sethe5un's answer doesn't work. I would add 100% height to your container div and see if that allows the inner one to be the full height
    Last edited by VIPStephan; 02-13-2012 at 12:42 PM.

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As they said, you need to expand html, body, #containing_div1, #containing_div2, #content all to min-height:100%; (note: In IE6, "height" functions like "min-height").
    You should put an outline:1px red dashed; around all your divs to see which ones are expanding to 100% height.

    I'd also suggest tinkering around with position:absolute in some barebones examples. It seems to actually make a div expand to 100%. Then you can always put a relatively positioned div inside it.

    If all else fails, try throwing a .clearfix class on one or two of those elements at a time: http://www.positioniseverything.net/easyclearing.html

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for all the replys!

    So I have added a min-height of 100 percent to the left column along with position absolute. But now the problem is that the left column now extends vertically outside of the main container, and the right column goes behind the left column. I can move the right column by giving it a margin-left, but I still need to get the left column content to stay "inside" of the main container. I tried overflow hidden on the left column and overflow auto on the main container but neither worked. The goal is to be able to add a small image at the bottom of the left column, so I can't have the column extending outside the main container.
    Last edited by amymcdo; 08-18-2010 at 06:01 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    A link to your page might help give more accurate help, I think.

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The page isn't live yet. Should I just copy and paste some of the code here?

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by amymcdo View Post
    The page isn't live yet. Should I just copy and paste some of the code here?
    Or put it live on a demo host so we can literally see what's going on.
    The easier you make it for us to see your problem and mess with it, the more likely we are to help.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by amymcdo View Post
    The page isn't live yet. Should I just copy and paste some of the code here?
    Yes, paste your entire code here.

  • #10
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I will have to post the code since I don't have an available server to post to currently...

    Here is the CSS:

    @charset "UTF-8";

    body
    {
    text-align: center;
    margin-top:0px;
    background-image:url(../images/hmpgBG.gif);
    background-repeat:repeat;
    height:100%;
    }

    html {height:100%}

    *html .container-sub { min-height: 100%;}
    *html .col-left {height: 100%;}
    *html .col-right {height: 100%;}


    .container-sub {
    width: 888px;
    min-height:100%;
    background-image:url(../images/subpgshd.gif);
    background-repeat:repeat-y;
    margin-right:auto;
    margin-left:auto;
    text-align:left;
    }

    .col-left {
    width: 197px;
    margin-left:6px;
    padding-top: 25px;
    float:left;
    background-color:#FF0;
    height:100%;
    /*position:absolute;*/
    }

    .col-right {
    width:625px;
    padding-left: 25px;
    padding-top: 20px;;
    /*background-color:#0C0;*/
    float:left;
    min-height:100%;
    /*margin-left: 203px;*/
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000;
    }

    .fedbot {
    background-image:url(../images/leftnav-fedbot.gif);
    background-repeat:no-repeat;
    width:197px;
    height: 165px;
    margin-bottom:200px;
    }

    .container-bottom {
    width: 888px;
    height: 11px;
    background-image:url(../images/hpbotshd.gif);
    background-repeat:no-repeat;
    margin-left: auto;
    margin-right: auto;
    }


    .linebreak {
    clear:both;
    }


    .linebreak-txt {
    height:10px;
    clear:both;
    }

    .subMktL {
    width: 199px;
    height: 86px;
    background-image:url(../images/sub-mktplc-L.gif);
    background-repeat:no-repeat;
    margin-left:6px;
    float:left;
    }

    .subMktR {
    width: 674px;
    height: 86px;
    background-image:url(../images/sub-mktplc-R.gif);
    background-repeat:no-repeat;
    float:left;
    }

    .whiteline {
    background-color:#FFF;
    height: 1px;
    width: 873px;
    margin-left:6px;
    }


    .pgTitle {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    color:#062156;
    border-bottom: 1px dotted #062156;
    padding-bottom:5px;
    }

    .header {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#0259B5;
    padding-top:2px;
    padding-left:2px;
    }

    .text {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    padding-left:3px;
    padding-top:10px;
    }


    Here is the HTM page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>


    <script>

    $(document).ready(function(){

    $("#Marketplace").addClass('butMarketSel');

    });

    </script>



    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>FedBid Sub Page</title>

    <link href="css/subpage-styles.css" rel="stylesheet" type="text/css" />
    <link href="css/topnav.css" rel="stylesheet" type="text/css" />
    <link href="css/header.css" rel="stylesheet" type="text/css" />
    <link href="css/footer.css" rel="stylesheet" type="text/css" />
    <link href="css/leftnav.css" rel="stylesheet" type="text/css" />


    </head>

    <body>

    <div class="container-sub">


    <div class="hdrLeft" title="FedBid: Better Buying, Smarter Selling"><img src="images/logo.jpg" width="286" height="69" alt="FedBid: Better Buying, Smarter Selling"></div>

    <div class="hdrRight">

    <div class="searchBox">
    <div class="searchInput"><input name="search" type="text" class="textInput"value="Search" size="39"></div>
    <div class="btnGo"><a href='go.htm'><img src="images/btn-go.gif" width="18" height="17" alt="GO" border="0"></a></div>

    </div><!--end searchBox -->

    <div class="infoBoxBG"><div class="infoBoxContent"><a href="mailto: info@fedbid.com" class="infoText">info@fedbid.com</a></div></div>
    <div class="phoneBoxBG"><div class="phoneBoxContent"><span class="phoneboxText">1.877.9FEDBID</span></div></div>



    </div><!--end hdrRight-->


    <div class="linebreak"></div>



    <div class="topnavBar">


    <a href="index.htm" title="Home"><div id="btnhome"><span>Home</span></div></a>
    <a href="about.htm" title="About"><div id="btnabout"><span>About</span></div></a>
    <a href="mktplc.htm" title="Marketplace"><div class="butMarket" id="Marketplace"></div><span class="butMarketSpan">Marketplace</span></a>
    <a href="buyers.htm" title="Buyers"><div id="btnbuyers"><span>Buyers</span></div></a>
    <a href="sellers.htm" title="Sellers"><div id="btnsellers"><span>Sellers</span></div></a>
    <a href="login.htm" target="_blank" title="Log In"><div id="btnlogin"><span>Login</span></div></a>

    </div><!--end topnavBAr -->

    <div class="whiteline"></div>

    <div class="linebreak"></div>

    <div class="subMktL" title="Marketplace"></div>
    <div class="subMktR" title="Marketplace"></div>

    <div class="linebreak"></div>



    <div class="col-left">

    <ul id="leftnavmenu">
    <li><a href="what-is-fedbid.htm">What is FedBid?</a></li>
    <li id="leftnavmenusel">Customers</li>
    <li><a href="tangible.htm">Tangible Results</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="whhere-in-the-world.htm">Where in the World?</a></li>
    <li><a href="terms.htm">Terms of Use</a></li>
    </ul>


    </div><!--end col-left-->



    <div class="col-right">
    <div class="pgTitle">Customers</div>

    <p class="text">
    New agency customers and repeat use from existing agency customers are the best indicators of success for FedBid's online marketplace services. During the government's fiscal year 2008, dozens of federal organizations utilized FedBid, resulting in double-digit NET average savings, as compared to the independent government estimate, and 85% of all dollars were awarded to small businesses. To date, agencies have awarded $billions worth of acquisitions through FedBid.
    </p>

    <div class="header">Federal organizations currently utilizing FedBid include:</div>


    <ul>
    <li>Department of the Air Force</li>
    <li>Department of the Army </li>
    <li>Department of Commerce </li>
    <li>Department of Defense </li>
    <li>Department of Energy</li>
    <li>Department of Health and Human Services </li>
    <li>Department of Homeland Security</li>
    <li> Department of Interior</li>
    <li>Department of Justice </li>
    <li>Department of Labor </li>
    <li>Department of the Navy </li>
    <li>Department of State </li>
    <li>Department of Transportation </li>
    <li>Department of Treasury </li>
    <li>Department of Veterans Affairs
    Environmental Protection Agency</li>
    <li>Federal Communications Commission </li>
    <li>Federal Bureau of Investigation </li>
    <li>General Services Administration </li>
    <li>National Aeronautics and Space Administration </li>
    <li>National Transportation Safety Board
    Office of Personnel Management </li>
    <li>Securities and Exchange Commission </li>
    <li>Social Security Administration </li>
    <li>U.S. Agency for International Development </li>
    <li>U.S. Government Printing Office </li>
    </ul>


    </div><!--end col-right-->


    </div><!--end container-sub-->

    <div class="container-bottom"></div>

    <div class="linebreak"></div>

    <div class="footer">

    <div id="footer-left">&copy 2001-2010 All Rights Reserved</div>
    <div id="footer-right">Job Opportunities &nbsp; &bull; &nbsp; Privacy &nbsp; &bull; &nbsp; Terms &nbsp; &bull; &nbsp; Feedback &nbsp; &bull; &nbsp; Contact Us</div>

    </div><!--end footer-->


    </body>
    </html>

    Thanks for your help!!

  • #11
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just want to point out that I used a background color of yellow in the left column so I could tell if that column was actually expanding to 100 percent or not, so it is not actually supposed to have the yellow background.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    So, are you trying to place your image effectively at the bottom of .col-left and in order to do this you're trying the make .col-left the same height as .col-right. Is that correct?
    Last edited by SB65; 08-19-2010 at 04:32 PM.

  • #13
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still baffled a web-developer doesn't have hosting...
    Check out LREhosting.com, $11/yr for PHP-capable hosting.

    If you can't get that, there are tons of free web-hosts out there for hosting HTML/CSS.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If my earlier understanding is correct, I'd suggest the easiest approach would be to put the img within .col-right in your html, and then use absolute positioning to place it where you want it relative to .col-right - which is to the left, in the space underneath .col-left. This assumes that .col-left is always significantly shorter than .col-right - which looks to be the case.

    Something like:

    Code:
    <div class="col-right">
    <img id="specialImage" src="myimage.jpg" width="150" height="100">
    <div class="pgTitle">Customers</div>...
    with css:

    Code:
    .col-right {
    position:relative;
    width:625px;
    padding-left: 25px;
    padding-top: 20px;;
    float:left;
    min-height:100%;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000;
    }
    
    #specialImage{
    position:absolute;
    bottom:0;/*put it at the bottom of .col-right...*/
    left:-200px/*...and move it to the left*/
    }

  • #15
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi SB65,

    I tried that approach, but the image is still getting placed directly under the last link in the left navigation. I need it to be at the bottom....


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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