CODEWITHSUNDEEP
cssheightcss-position
TMNuclear
TMNuclear

Reputation: 1175

How to adapt height of a div to the height of an absolute div inside of it?

I'm struggling with these div's lately. For instance, look at this code below:

<div class="container">
{
    width: auto;
    height: auto;
}
    <div class="content">
    {
        width: auto;
        height: auto;
    }
        <div class="upload">
        {
            width: 400px;
            margin-left: 600px;
            position: absolute;
        }
        </div>
    </div>

    <div class="footer>

    </div>
</div>

First a small draw of what is actually on the screen (coudn't draw it any nicer):

--------------------------------------
|               CONTAINER            |
|   _____________________________    |
|   [       CONTENT   = = = =  =]    |
|   [                 = UPLOAD =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 = = = = = ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [___________________________]    |
|   _____________________________    |
|   [          FOOTER           ]    |
|   [___________________________]    |
--------------------------------------

When the class upload gets bigger in height, it floats outside of the container and content div, because of the absolute positioning.

I need to find a way to adjust this container's or content's size to the upload div.

When I style the upload class like this:

position: relative;
float: right;
padding-right: 500px;

It works, but only at this resolution. If you zoom in, this padding messes up the content (on the left side) and the upload (on the right side). Keeping the margin-left how it now is, is good, because there are things left of the upload div which require this minimal space on whatever resolution.

So anyone... Any ideas?

EDIT

For a second I though I had it.

The problem if you give upload the attribute position: relative in my case is that it pushes everything inside the content beneat the upload div....

So I replaced the .upload with position: relative; and added a new div around whatever is inside the content (except for the upload ofcourse)

.insidecontent
{
float: left;
position: absolute;
top: 170px;
}

But now the content height equals to the height of upload and when it's smaller than the content's or .insidecontent's it gets cut off.

I'm sorry I can't give a good code example in jsfiddle, it's not really showing what I see on my webpage.

Upvotes: 1

Views: 1924

Answers (1)

Rajiv Pingale
Rajiv Pingale

Reputation: 1015

you can use relative positioning which will help you a lot. Update your code with following details

.upload{
    width: 25%;
    position: relative;
    top: -24%;
    left: 69%;    
}

Sample Code

Upvotes: 2

Related Questions