css - Div with text not stretching vertically inside wrapper -


i have wrapper inside header, left column , main content. outside wrapper got footer.

my problem main content, if there's not enough text, doesn't stretch till bottom of page. if insert lorem ipsum etc, being many rows it's ok, if try few rows, main div stops before end of wrapper (or better, end of page, before footer).

here's html code

<?php session_start(); unset($_session['message']); ?> <!doctype html> <html> <head> <link rel="stylesheet" href="../css/stili.css" type="text/css" /> <script type="text/javascript" src="../script/scripts.js"></script>  <meta charset="utf-8"/> <title></title> <style>  </style> </head> <body> <div id="wrapper">  <div id="header">      <?php      include('../php/header.php');     ?> </div>  <div id="leftcolumn"> <?php      include('../php/leftcolumn.php'); ?> </div> <div id="main" >welcome our site  ...some text, not enough stretch end of page...   </div>          <div style="clear: both"></div> </div>  <div id="footer">copyright 2013</div>  </body> </html> 

and here's css

html, body { padding:0; margin:0; height:100%; }  #wrapper { min-height:100%; height:auto; margin:0 auto -30px; width:950px; background-color:#e3aa56;  }  #main { float:right; width:680px; padding:10px; background:#e0cd90; text-align:justify; overflow: auto;   }  #main a{ font-size:40px; }  #footer{  border-top: 2px solid #cccccc; width:950px; margin:auto ; height:30px; background:#ee5; clear: both; } 

thanks in advice finding problem!

splitting page multiple columns stretching automatically height of viewport ongoing topic. google that, there several css based solutions around there.

the problem is, height of surrounding boxes undefined (html, body, wrapper in case). may add "style" if theres size on parent well.

one weired solution is, set style of html object:

<html style="overflow:hidden;clip:              rect(auto);height:100%;;margin:0px;padding:0px;              background-color:white;"> 

(yes, it's not forbidden, can , it's ie 6 , 7 proven...) ,

#wrapper { min-height:100%; height:100%'; margin:0 auto -30px; width:950px; background-color:#e3aa56; overflow: hidden; /* not sure if want */ } 

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -