Databases
StackOverflow2013
Postsdbo
POHow to adapt height of a div to the height of an absolute div inside of it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to adapt height of a div to the height of an absolute div inside of it?
    text
    copied!<p>I'm struggling with these div's lately. For instance, look at this code below:</p> <pre><code>&lt;div class="container"&gt; { width: auto; height: auto; } &lt;div class="content"&gt; { width: auto; height: auto; } &lt;div class="upload"&gt; { width: 400px; margin-left: 600px; position: absolute; } &lt;/div&gt; &lt;/div&gt; &lt;div class="footer&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>First a small draw of what is actually on the screen (coudn't draw it any nicer):</p> <pre><code>-------------------------------------- | CONTAINER | | _____________________________ | | [ CONTENT = = = = =] | | [ = UPLOAD =] | | [ = =] | | [ = =] | | [ = =] | | [ = =] | | [ = =] | | [ = =] | | [ = =] | | [ = =] | | [ = = = = = ] | | [ ] | | [ ] | | [ ] | | [ ] | | [ ] | | [ ] | | [ ] | | [___________________________] | | _____________________________ | | [ FOOTER ] | | [___________________________] | -------------------------------------- </code></pre> <p>When the class <code>upload</code> gets bigger in height, it floats outside of the <code>container</code> and <code>content</code> div, because of the absolute positioning.</p> <p>I need to find a way to adjust this <code>container</code>'s or <code>content</code>'s size to the <code>upload</code> div.</p> <p>When I style the upload class like this:</p> <pre><code>position: relative; float: right; padding-right: 500px; </code></pre> <p>It works, but only at this resolution. If you zoom in, this padding messes up the <code>content</code> (on the left side) and the <code>upload</code> (on the right side). Keeping the margin-left how it now is, is good, because there are things left of the <code>upload</code> div which require this minimal space on whatever resolution.</p> <p>So anyone... Any ideas?</p> <p><strong>EDIT</strong></p> <p>For a second I though I had it.</p> <p>The problem if you give <code>upload</code> the attribute <code>position: relative</code> in my case is that it pushes everything inside the content beneat the <code>upload</code> div....</p> <p>So I replaced the <code>.upload</code> with <code>position: relative;</code> and added a new div around whatever is inside the <code>content</code> (except for the <code>upload</code> ofcourse)</p> <pre><code>.insidecontent { float: left; position: absolute; top: 170px; } </code></pre> <p>But now the <code>content</code> height equals to the height of <code>upload</code> and when it's smaller than the <code>content</code>'s or <code>.insidecontent</code>'s it gets cut off.</p> <p>I'm sorry I can't give a good code example in jsfiddle, it's not really showing what I see on my webpage.</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