100% height of an inner div

**johnncyber** · 03-01-2007, 12:35 AM

I am trying to make a relatively easy fluid, 2 column layout, however I can not get the content column and the right column be 100% of the height of the container div.

Here is the simplified HTML (it is a Joomla Template)

Code:

<body>
<div id="container">
<div id="header">
  <img src="<? echo $GLOBALS[mosConfig_live_site]."/templates/".$GLOBALS[cur_template];?>/images/logo.png" alt="Young Professionals of Greater Lubbock"/>
</div><!-- end header -->
<div id="topMenu">
  <?php mosLoadModules ( 'topMenu' ); ?>
</div><!-- end topMenu -->
<div id="wrapper">
<!-- ============ Right Area ============ !-->
<div id="right">
  <?php mosLoadModules ( 'right' ); ?>
</div><!-- end right -->

<!-- ============ Content Area ============ !-->
<div id="content">
<?php include_once ("mainbody.php"); ?>
</div><!-- end content -->

</div><!-- end wrapper -->
<div id="footer">
<?php mosLoadModules ( 'footer' ); ?>
</div><!-- end footer -->

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

Here is the Live Site: http://mark.eve-websolutions.com/

**pitbull82** · 03-03-2007, 04:59 AM

If I understand you well, I want to have to div columns to have exact height. There's no possibility to achieve it via CSS - solution is using image as the background which will imitate columns.

If you look at one of my sites: http://it.mnabialek.pl you will see 3 columns 100% height - but in fact they are not having exact size. I used http://it.mnabialek.pl/images/layout/tlo.gif to achieve such result.

**chrishirst** · 03-03-2007, 05:43 AM

unless you explicitly set the container height, the browser can't determine what 100% is equal to.

**johnncyber** · 03-04-2007, 02:20 PM

Quote:

Originally Posted by pitbull82

If I understand you well, I want to have to div columns to have exact height. There's no possibility to achieve it via CSS - solution is using image as the background which will imitate columns.

If you look at one of my sites: http://it.mnabialek.pl you will see 3 columns 100% height - but in fact they are not having exact size. I used http://it.mnabialek.pl/images/layout/tlo.gif to achieve such result.

The problem with that solution is that the columns are a fixed width. I am trying to make a 2 column fluid design.

chrishirst: I explicitly told the page height to be 100% and the container divs to also be 100%. From what I understand that should be enough to make an inner div height's 100%.

**pitbull82** · 03-04-2007, 02:45 PM

If you have 2 fluid columns ther won't be any problem. You will only have to use background-position with %

**persist1** · 03-04-2007, 11:00 PM

As an addition to the mnabialek.pl demo, I put together the following:

http://www.henick.net/vignettes/columns.php

Hope it helps.

**chrishirst** · 03-05-2007, 03:11 AM

Quote:

I explicitly told the page height to be 100% and the container divs to also be 100%. From what I understand that should be enough to make an inner div height's 100%

Yep, sure but do you know what 100% of 100% means.
100% is not an explicit height, 600px would be an explicit height

the browser rendering engine doesn't know what the height of the body element will be (in pixels) until the page is fully rendered.

**johnncyber** · 03-06-2007, 10:24 AM

I fixed my problem. What I ended up doing is putting the background of the content div as the background of the body and then created a XX px column that stretched 100% of the body underneath the right nav. Thanks for all your help.