Databases
StackOverflow2013
Postsdbo
POCss different heights
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCss different heights
    text
    copied!<p>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.</p> <p>HTML STRUCTURE:</p> <pre><code>&lt;div class="header"&gt; &lt;h1&gt;AGENDA ELETRÔNICA&lt;/h1&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div class="left"&gt; &lt;ul&gt; &lt;ol&gt;&lt;a class="menu" href="index.php"&gt;Home&lt;/a&gt;&lt;/ol&gt; &lt;ol&gt;&lt;a class="menu" href="cadastrar_pessoas.php"&gt;Cadastrar&lt;/a&gt;&lt;/ol&gt; &lt;ol&gt;&lt;a class="menu" href="buscar_pessoas.php"&gt;Buscar&lt;/a&gt;&lt;/ol&gt; &lt;ol&gt;&lt;a class="menu" href="gerenciamento.php"&gt;Alterar&lt;/a&gt;&lt;/ol&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="right"&gt; FORM PHP &lt;/div&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;small&gt;&lt;a class="rodape" href=""&gt;Sobre&lt;/a&gt;&lt;/small&gt; &lt;small&gt; || &lt;/small&gt; &lt;small&gt;&lt;a class="rodape" href=""&gt;Contato&lt;/a&gt;&lt;/small&gt; &lt;small&gt; || &lt;/small&gt; &lt;small&gt;&lt;a class="rodape" href=""&gt;Ajuda&lt;/a&gt;&lt;/small&gt; &lt;/div&gt; </code></pre> <p>AND CSS STRUCTURE UNTIL NOW:</p> <pre><code>.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%; } </code></pre> <p>I tried many solutions in stackoverflow and othes sites, but i couldn't transform to my needs.</p> <p>Can anyone help me?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload