Css different heights - html

Question

I'm learning html, css and php.
I created this structure with header, menu(left), content(right) and footer.
Inside 'right' has a php form.
When user send form to server, the server answers with a table.
This table can be bigger than 'left' height.
In this way left and right are at different heights.
HTML STRUCTURE:
<div class="header">
<h1>AGENDA ELETRÔNICA</h1>
</div>
<div class="container">
<div class="left">
<ul>
<ol><a class="menu" href="index.php">Home</a></ol>
<ol><a class="menu" href="cadastrar_pessoas.php">Cadastrar</a></ol>
<ol><a class="menu" href="buscar_pessoas.php">Buscar</a></ol>
<ol><a class="menu" href="gerenciamento.php">Alterar</a></ol>
</ul>
</div>
<div class="right">
FORM PHP
</div>
</div>
<div class="footer">
<small><a class="rodape" href="">Sobre</a></small>
<small> || </small>
<small><a class="rodape" href="">Contato</a></small>
<small> || </small>
<small><a class="rodape" href="">Ajuda</a></small>
</div>
AND CSS STRUCTURE UNTIL NOW:
.container{
}
.header, .footer{
text-align: center;
background-color: #777;
color: white;
border-style: dotted;
border-width: 1px;
border-color: black;
width: 100%;
}
.footer{
text-align: center;
line-height: 100%;
float: left;
height: 5%;
margin-bottom: 3px;
}
.left{
border-style: dotted;
border-width: 1px;
border-color: black;
background-color: #CCC;
float: left;
width: 11%;
min-height: 500px;
margin: 2px 0px 2px 0px;
padding: 0px 0px 0px 0px;
height: 100%;
}
.right{
border-style: dotted;
border-width: 1px;
border-color: black;
width: 88%;
float: right;
min-height: 500px;
margin: 2px -2px 2px 8px;
padding: 0px 0px 0px 0px;
height: 100%;
}
I tried many solutions in stackoverflow and othes sites, but i couldn't transform to my needs.
Can anyone help me?

Answer 1

If I understand your question correctly, you want the left and the right divs to always be the same height, and the content in the right div is not always known.
Here's a table-free CSS solution: http://jsfiddle.net/panchroma/Hxh9x/
I have added a large padding and an equally large negative margin to the left and right divs, then the container div which wraps around them both has overflow hidden.
CSS
.left{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}
.right{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}
.container{
overflow: hidden;
}
HTML
<div class="header">
</div> <!-- end header -->
<div class="container">
<div class="left">
</div> <!-- end left -->
<div class="right">
</div> <!-- end right -->
</div> <!-- end container -->
<div class="footer">
</div> <!-- end footer -->
This technique works well cross-browser as well.
For simplicity I commented out some of your extra CSS. In this example I also removed your borders around these divs. Remember that borders acutally add extra width to the div, and so this can throw your width calculations off. If you need borders, check out the the box-sizing: border-box method which forces the border inside your div.
Hope this helps!

Answer 2

I cannot see any problem with having different heights, but I would suggest you use tables; in this case:
<div id="header">...</div>
<table width="100%">
<tr>
<td valign="top id="left">....</td>
<td valign="top id="right">....</td>
</tr>
</table>
<div id="footer">...<.div>
In this way both 'sides' will have the same height.