Div che non riempe spazio vuoto in verticale
Buonasera a tutti, cercherò di essere il più chiaro possibile nell'esporre il mio problema.
Nella mia pagina ho messo un wrapper con dentro un header, una left column, un main e un push per lo sticky footer.
Fuori dal wrapper infine ho messo il footer, tutto come div.
Nel main, che è la parte principale della pagina, la mia intenzione è di mettere la maggior parte dei contenuti, anche perchè replicherò questa struttura in altre pagine.
Purtroppo, testando, mi sono reso conto che con testi di 2-3 righe il div main non arriva fino in fondo alla pagina, ma si limita al suo contenuto.
So che è una delle domande più chieste sul CSS in internet, però ho davvero provato mille versioni differenti. Ho chiesto pure su stackoverflow ma non mi sono stati d'aiuto :/
Vi posto il mio codice html e il css, sperando che almeno voi possiate darmi una mano
Codice html
Codice HTML:
</html>
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<meta charset="utf-8"/>
<title></title>
</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" >
Testo di debug bla bla bla
</div>
<div id="push"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
CSS (Metto solo quelli che penso siano rilevanti per il problema)
Codice:
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; /* -44px being the size of the footer */
width:950px;
background-color:#E3AA56;
overflow:hidden;
}
#main {
height:100%;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
margin:0 auto;
overflow:hidden;
}
