Two continuous position relative are out of normal

Question

I wrote content which contains a photo wall in img-group. I use clarify of Bootstrap. Then I wrote a footer. But the footer is out of normal.

My image wrapper is relative and footer is relative. Img-group is absolute. I review the position tutorial again but I cannot figure out how to handle this problem. I'm going to crash>.< Help.

My html:

    <div id="content">
     <div class="rwrapper">
        <div class="container">
            <h1 class="margintop text-center">Popular Activities</h1>
        </div>
        <div class="img-group">
            <a id="pic1" class="line1" href="activity-single.php?act_id=4">test</a>
            <a id="pic2" class="line1" href="activity-single.php?act_id=12">test2</a>
            <a id="pic3" class="line1" href="activity-single.php?act_id=26">test3</a>
            <a id="pic4" class="line2" href="activity-single.php?act_id=27">test4</a>
            <a id="pic5" class="line2" href="activity-single.php?act_id=31">test5</a>
            <a id="pic6" class="line2" href="activity-single.php?act_id=43">test6</a>
            <a id="pic7" class="line3" href="activity-single.php?act_id=6">test7</a>
            <a id="pic8" class="line3" href="activity-single.php?act_id=5">test8</a>
            <a id="pic9" class="line3" href="activity-single.php?act_id=1">test9</a>
        </div>              
    </div>
</div>
<div class="clearfix"></div>
<div id="footer" class="index">
    <div class="container">
        <div class="wrapper">
            <ul class="list-inline">
                <li><a href=""><i class="fa fa-facebook-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-google-plus-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-twitter-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-pinterest-square fa-3x"></i></a></li>
            </ul>
            <p class="h5 text-center">copyright © 2015 Sports Buddy Group.</p>
        </div>

    </div>  
</div>  

My css:

    /* image group */
    .img-group{
        position: absolute;
        left: 0;
        margin-top: 2%;
        width: 100%;
    }

    .img-group a{
        position: relative;
    }

    .img-group a{
        float: left;
        width: 33.3333333%;
        display: block;
        text-align: center;
        top: 0;
        left: 0;
        text-indent: -999px;
    }

    .img-group a::before{
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 233px;
    }
    .img-group a::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 233px;
        top: 0; 
        left: 0;
        background: rgba(0,0,0,0.45);
        z-index: 10;
    }


    .rwrapper{
        position: relative;
    }

Answer 1

Absolutely positioned elements don't affect the height of their containers because they're removed from the normal flow of elements. See https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning. So, you have two options I can think of. One, apply a height to your rwrapper class. Like

.rwrapper{
    position: relative;
    height: 300px; /* <- insert the height you need here
}

However, if you don't know how much space you'll need, then this solution won't work. My other suggestion is just to switch everything to using position: relative. You don't seem to be gaining anything by using absolute positioning, at least in the code you provided.