CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

absolute position inside relative with no defined height

I am trying to put an absolute div inside a relatively positioned div. But I don't want to define a height for the relative div.

The relative div has a background colour and when I don't define a height the absolute div goes 'outside' the relative div. I can't control how many lines the text will be so the height of the divs change

HTML

<div class="row top-footer">
    <div class="top-footer-text text-center">
        <div class="test">
        <h1>title</h1>

        <div class="footer-btn-wrap">
          <div class="footer-btn"><a href="...">button</a></div>

          <div class="footer-btn"><a href="...">button</a></div>
        </div>
        </div>      
    </div>
</div><!-- /top-footer -->

CSS

.top-footer {
position: relative;
background-color: #686a6f;
width: 100%;
padding-top: 40px; margin: 0;
}

.test { 
position: absolute; 
top: 0px; margin: 0;
}

EDIT

I want .top-footer (position: relative) to contain .test (position: absolute) with space/padding/margin on the top and bottom of .test. the height of the div is unknown because the content may take up more than one line depending on screen size

Upvotes: 1

Views: 2474

Answers (4)

user1685883
user1685883

Reputation: 74

.top-footer {
    position: absolute;
    background-color: #686a6f;
    width: 100%;
    padding:0px;
    margin: 0;
}
.test h1{ 
    padding-left:20px;
    position: relative; 
    top: 5px; margin: 0;
    float:left;
    color:#FFF;
}
.footer-btn,.footer-btn-wrap
{
    padding-left:200px;
    color:#FFF;
}
.footer-btn a{
    padding:5px 10px;
    float:left;
    color:#ffffff;
    text-transform:capitalize;
    text-decoration:none;
}

Upvotes: 0

Doug
Doug

Reputation: 821

Adding whitespace around the child div is fairly trivial. However preventing the parent div from collapsing is more tricky and is the thing you need to tackle first. The problem you are having is that with the parent relatively positioned and the child absolutely positioned, the only element on the entire page that actually "knows" where the child is is the parent... and even then it's a fairly bad parent because it won't even make enough space for the child! The rest of the DOM will behave as if the element isn't even there - other non-positioned elements will float over or above it - even text will be obscured by your child div. Assuming you want to put other content in the parent div using absolute positioning in this way only means you're going to have to use absolute positioning all around the place... which can get a bit heavy on the brain debugging layout problems later on.

The only possible solutions I can think of offhand are:

  1. Use javaascript to sniff out the height of the child div and apply that to the parent. A fairly simple job if you use a library like jQuery but that requires extra downloaded files and makes your site unnecessarily bulky if this is the only task you're using it for. THis also wouldn't solve the problem of the child div obscuring other elements on the page.

  2. Rework your CSS (and it might take a lot of reworking depending on how far you've got and the complexity of the styling) to use display:inline-block on the child... this will stop the parent from collapsing but might give you additional layout issues.

  3. Rework your CSS (ditto) to float:left the child div. You would then need to use a CSS "clear hack" in order to prevent the parent divv from collapsing, although this is a tiny piece of CSS you can cut and paste from elsewhere... an easy job.

If you're determined to use absolute positioning like this my preferred solution would be to use jQuery (option 1) because most of my work tends to use a degree of it anyway... it's a tool I would have handy and the code to perform this task would be quite trivial.

EDIT - Here's a little fiddle to get you started. https://jsfiddle.net/fo8mq1vf/

Upvotes: 1

Shoeb Mirza
Shoeb Mirza

Reputation: 918

The answer to your question is simply remove 

position:absolute from your absolute div (.test)
position:relative from your relative div (.top-footer)
height:300px from your relative div (.top-footer)

This is the tested version of https://jsfiddle.net/s3zLa54t/3/ with multiple number of divs under your main div. You can check that it is not going beyond the grey background.

Upvotes: 0

Jayant
Jayant

Reputation: 11

This is how the output of your code looks like: https://jsfiddle.net/s3zLa54t/2/. The parent div (.top-footer) does contain the .test div. What browser are you using to view the output?

As for the padding, I guess you don't see any effect of changing padding-top. Try removing the top: 0px property in the .test div.

If this is not what you were looking for, do clarify the question here.

Upvotes: 0

Related Questions