Height:100% is not considered

Question

Hi guys,

I would want to simulate the behavior of a table with div.

I have a struct of my layout divide into three columns:

div#wrapper {
  width:800px;
  float:left;
  height:100%;
  margin-top:7px;
  text-align:center;
}
div#left {
  width:167px;
  float:left;
  padding-bottom:50px;
  margin-right:3px;
}
div#main {
  width:454px;
  float:left;
}
div#right {
  width:167px;
  float:left;
  margin-left:3px;
}

wrapper is the container of three columns left,main,right

div "main" have a variable content so in some case is more long and in other case is very short. When the content vary,div wrapper is adapted and it's ok but left and right columns don't adapt to wrapper.

P.S Without doctype there is no problem, infact I set the height of left, main and right to 100% but when I insert transional.dtd , the height of div is not considered.

How can resolve this problem?

Sorry for my english!!

Answer 1

You could try to insert:

min-height: 100%;

as well, to cover yourself :)

Answer 2

I try to use

min-height:100%;

but I can solve the problem.

I read in different forum that is not possibile with xhtml fixed height:100% with a div, and that the only one method to solve this problem is to use JQuery?

Answer 3

you should use jQuery

<script type="text/javascript">
$(this).load(function() {
   alert(document.documentElement.clientHeight + '+' + $(window).height());
   if ($(window).height() - 250 > 300)
      $('#content').css('min-height', '224px');
   else
      $('#content').css('min-height', $(window).height() - 250);
    }
);
$(this).resize(function() {
    if ($(window).height() - 250 > 300)
       $('#content').css('min-height', '224px');
    else
       $('#content').css('min-height', $(window).height() - 250);
    }
);
</script>

<div id="content" style="min-height:350px;">

</div>

just change numeric digits of hights.

Answer 4

I agree with @Neurofluxation so let's see what I can find on Google:

100% Height Layout Using CSS and CSS Faux Columns