Question

As i am trying to develop a template for one of my games site. Here i am getting issue with height="auto" property. The thing is i am using container div width as fixed value and container height as auto value. Means actually my home page height is at about 500px, but my play page height i need to take as per the requirement. When i add one more div beneath the game play then i am not able to see the container. Please look this for details. http://www.toon10.com/play/Mario_Vs_Bowser

Actually what i did is for total wrapper i kept height as 450px and in the play page i kept the height as auto. Can anyone check this and let me know what mistake i made.

See my code :

#wrapper{ 
          margin: 0 auto;
          width: 1230px;
          height: 450px;
          background: #fff;
          -webkit-border-radius: 8px;
          -moz-border-radius: 8px;
          border-radius: 8px;
          overflow: hidden
        }

playpage:

<div style="width:900px;">
    <div><?php echo strtoupper($gameInfoRow['name']);?></div>
    <div class="boxContent" style="height:100%; padding:5px">
         <div align='center'>
             /// game here
         </div>
    </div>
    <div style="clear:both"></div>
</div>

<div style='height:5px'></div>
<div style="width:900px; background:#CC0000; height:500px">
    //the below game box red strip
</div>

Answer 1

You are using overflow:hidden; for the .wrapper div

Also, the height is fixed, try to use:

height:500px;
height:auto !important;

And remove the overflow property.