Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS-P nightmare
    primarykey
    data
    text
    <p>I have a container DIV position:relative. Hold everything in it Then one left column one right column, classical layout. Both of them are absolute positioned inside this relative #Main. I want the right to be fluid so I say top: 0px; left: 280px; (left column width) right: 0px all works but bottom:0px does not work. I say height: 100% still nothing. It snaps to the edges in all of them except the bottom. Height of that div is always 1px or 0px. Only px values seem to work but that would be unusable. What is the reason to that? any leads? thx in advance ... </p> <p>code is pasted below</p> <h2>HTML:</h2> <pre><code>&lt;div id="Main"&gt; &lt;div id="LeftSection"&gt; &lt;div id="Logo"&gt; &lt;/div&gt; &lt;div id="dvPanelMenu"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="RightSection"&gt; &lt;div id="dvTopMenu"&gt; &lt;/div&gt; &lt;div id="dvLogin"&gt; &lt;/div&gt; &lt;div id="dvContent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h2>CSS:</h2> <pre><code>body { margin: 0px; } #Main { position: relative; } #LeftSection { position: absolute; width: 280px; height: 100%; } #Logo { position: absolute; margin: 10px 0px 10px 30px; } #dvPanelMenu { position: absolute; top: 140px; left: 0px; width: 280px; height: auto; text-align: left; } #RightSection { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 280px; background-color: Blue; } #dvContent { position: absolute; top: 36px; left: 2px; right: 0px; bottom: 20px; border: 1px dotted black; } #dvTopMenu { position: absolute; top: 0.4em; left: 20px; } #dvLogin { position: absolute; right: 50px; top: 0.4em; font-family: Tahoma; font-size: 11px; text-align: left; color: Teal; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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