Databases
StackOverflow2013
Postsdbo
POPush vertically resizable Div to bottom of wrapper. How?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPush vertically resizable Div to bottom of wrapper. How?
    text
    copied!<p>First of all, hello all. This problem is driving me to insanity so I hope for a simple solution </p> <p>Here is <a href="http://img195.imageshack.us/img195/3276/divcolumns.png" rel="nofollow noreferrer">an image of what I wanted originally</a>.</p> <p>But I didnt want to use hacks to get Box 1 and (Box 2+Box 3) to expand with each other. So I will just use a background color on the wrapper instead so its not noticeable that they have different heights.</p> <p>This is what I have now:</p> <p><strong>CSS</strong></p> <pre><code>#wrapper { background: #000; width: 50%; float: left; } #box1 { background: #FF0012; width: 65%; float: left; } #box2 { background: #141; width: 35%; margin-left: 65%; } #box3 { background:#AA1232; width: 35%; margin-left: 65%; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="box1"&gt; &lt;/div&gt; &lt;div id="box2"&gt; &lt;/div&gt; &lt;div id="box3"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>If you wonder why I dont use <code>float: right;</code> on Box 2 and 3 its because if Box 1 is lower than Box 2 then Box 3 will float under Box 1 instead of under Box 2.</p> <p>Problem: 1. Fix Box 3 to the bottom of the wrapper 2. When rows are inserted in Box 3 and Box 2, they shouldn't overflow - expand the wrappers height instead (as it does with the code i posted)</p> <p>If I use <code>position: absolute; bottom: 0;</code> on Box 3 then it will overflow Box 2 when rows are inserted and Box 3 gets too heigh.</p> <p>Any ideas of how to solve this?</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