...

View Full Version : making inner div 100 percent height



amymcdo
08-17-2010, 11:48 PM
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!

ch4sethe5un
08-18-2010, 12:16 AM
I am using min-height to achieve this.
why not try min-height again?



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/fixed-footers-without-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.

richF
08-18-2010, 01:09 PM
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

Aple
08-18-2010, 01:32 PM
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

amymcdo
08-18-2010, 06:59 PM
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.

SB65
08-18-2010, 07:13 PM
A link to your page might help give more accurate help, I think.

amymcdo
08-18-2010, 09:32 PM
The page isn't live yet. Should I just copy and paste some of the code here?

Aple
08-18-2010, 10:14 PM
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.

SB65
08-19-2010, 10:10 AM
The page isn't live yet. Should I just copy and paste some of the code here?

Yes, paste your entire code here.

amymcdo
08-19-2010, 04:16 PM
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!!

amymcdo
08-19-2010, 04:18 PM
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.

SB65
08-19-2010, 05:22 PM
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?

Aple
08-19-2010, 08:31 PM
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.

SB65
08-19-2010, 09:47 PM
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:


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

with css:


.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*/
}

amymcdo
08-20-2010, 03:00 PM
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....

SB65
08-20-2010, 03:14 PM
Can you post the code you've used?

In actual fact this thread (http://www.codingforums.com/showthread.php?t=202812) is on almost the same subject.

amymcdo
08-20-2010, 07:56 PM
I tried using the code you posted in the prior thread. I can see that the layer for my image is at the bottom of the left column, but it seems to be covered by the container.

See code below:

(since I have already copied the majority of the css code already, I will just update what I have changed)

CSS code:

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

.col-left {
width: 197px;
margin-left:6px;
padding-top: 25px;
float:left;
}

.col-right {
width:625px;
padding-left: 25px;
padding-top: 20px;;
float:left;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:18px;
color:#000;
}

.fedbot {
width:117px;
height: 178px;
position:absolute;
bottom:5px;left:5px
}


HTM page code:

<!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(){

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

});

</script>

<script>

$(document).ready(function(){

$("#marketplace").addClass('leftnavmenusel');

});

</script>

<script type="text/javascript">
$(document).ready(function(){
$('.saying-show').cycle({
fx: 'fade',
speed: 700,
timeout: 15000
});
});
</script>



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

<title>FedBid: Marketplace</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="fedbot"></div>


<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 class="butHome "id="home"><span class="butHomeSpan">Home</span></div></a>

<a href="about.htm" title="About"><div class="butAbout" id="about"></div><span class="butAboutSpan">About</span></a>

<a href="marketplace.htm" title="Marketplace"><div class="butMarket" id="TNmarketplace"></div><span class="butMarketSpan">Marketplace</span></a>

<a href="buyers.htm" title="Buyers"><div class="butBuyers" id="buyers"><span class="butBuyersSpan">Buyers</span></div></a>

<a href="sellers.htm" title="Sellers"><div class="butSellers" id="sellers"><span class="butSellersSpan">Sellers</span></div></a>

<a href="login.htm" target="_blank" title="Log In"><div class="butLogin" id="login"><span class="butLoginSpan">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 class="leftnavmenuUL">
<li><a href="marketplace.htm"class="leftnavmenu"id="marketplace">Marketplace Home</a></li>
<li><a href="mkt-whatisfedbid.htm" class="leftnavmenu" id="whatis">What is FedBid?</a></li>
<li><a href="mkt-customers.htm" class="leftnavmenu" id="customers">Customers</a></li>
<li><a href="mkt-tangible.htm" class="leftnavmenu" id="tangible">Tangible Results</a></li>
<li><a href="news.htm" class="leftnavmenu" id="news">News</a></li>
<li><a href="mkt-where.htm" class="leftnavmenu" id="where">Where in the World?</a></li>
<li><a href="terms.htm" class="leftnavmenu" id="terms">Terms of Use</a></li>
</ul>

<div class="saying-bar"></div>

<div class="sayingText">

<div class="saying-show">

<p>"I used FedBid in December and think it is easy to learn. Our office ordered several office supply items in one transaction for which we received 5 bids by the end of the day. I accepted the best offer the next day and received all of the items the day after. I didn't have to call the vendor, or give them my purchase card number. It is an effective and user-friendly tool!"

<br><br><span class="saying-name">Leticia Johnston, U.S. Department of State</span>

</p>

<p style="display:none;">"Your most junior employees, your recently hired employees with no contracting experience can be productive in the organization in very short time ... it is very easy for them to use [FedBid]."

<br<br><span class="saying-name">Bernard Valdez , Director of Contracting, Army MICC, Fort Sill, OK</span>

</p>


<p style="display:none;">"It's amazing how quickly the rank and file people with dirt on their boots and guns on their hips are actually doing this, and we're getting rave reviews from our customers."

<br><br><span class="saying-name">John Ely, Executive Director of Procurement, Department of Homeland Security CBP</span></p>


<p style="display:none;">"I've just completed my first FedBid award! Woooohoooo! I can't believe how much our agency has saved-just under $30K or 20%! So darn cool! ... but the fun is not over just yet ... I'm getting ready to post another FedBid buy."

<br><br><span class="saying-name">Contract Specialist, Department of Commerce NOAA</span></p>

</div><!--end saying-show-->

</div><!--end sayingText-->

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

<div class="col-right">

<div class="pgTitle">Marketplace</div>

<div class="header-after-pgtitle">The Online Marketplace for Commodities</div>

<p>FedBid provides a globally accessible, fair and open competitive environment, designed to dramatically improve efficiency, transparency, cost savings and compliance in the organizational procurement process.</p>

<div class="header1">Why States Should Be Using Reverse Auctions</div>


<p>Reverse auction expert Dr. David Wyld explodes the myths that surround reverse auctions and have hindered more widespread adoption. Given the state of the economy and the proven effectiveness of reverse auctions, Dr. Wyld writes that it is time for state leaders to ask why more procurement dollars are not being spent through reverse auctions to ensure savings. <a href="page.htm">Learn More &gt;</a></p>

</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>

amymcdo
08-20-2010, 08:46 PM
Hi SB65,

The solution from your prior post actually did work. I had overlooked that I was using class instead of id when I incorporated the fix into my code.

Initially, I did not have position relative on the main container and absolute on the image. Also, I was not inserting the div for the image in the correct place in the code. I initially had it within the left column as the last element in the column. I needed to have it as the first element in the container. So thanks so much for taking the time to help with this!!

Amy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum