CSS Div Positioning After Absolute Div

Question

What is the best way for me to resume the flow of the page in css.

Here is my situation:

I have 3 divs div 1(parent), div 1(child), and div 2(normal). parent div is absolute, child is relative. All is good so far. The problem i'm having is the the next normal div is shifted up to the same line as the absolute div (since i disrupted the flow of the page setting the parent div to absolute).

So my question is how do I put the normal div under the div that has the position of absolute. Do I just offset the margin-top property?

Thanks for all the help!

Take a look: https://jsfiddle.net/veLgmdt1/

Answer 1

http://jsfiddle.net/veLgmdt1/6

Simplified HTML structure by using rows and floated columns. This will eliminate need for margin and absolute positioning.

<div class="content-wrapper">
    <div class="row">
        <div class="col col-lg-3">
            <img src="http://lorempixel.com/230/230/" class="img-rounded">
            <button class="btn btn-primary">Invite To Project</button>
            <ul class="list-unstyled">
                <li>Member Since: July 21, 2016</li>
                <li>Toronto, ON</li>
                <li>
                    <ul class="list-inline">
                        <li>Social:</li>
                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                        <li><a href=""><i class="fa fa-youtube"></i></a></li>
                    </ul>

                </li>

            </ul>
        </div>
        <div class="col col-lg-9">
            <h2 class="profile-name">John Doe</h2>
            <h4 class="">Graphic Designer</h4>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div>
    </div>
    <div class="row">
         <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
        </ul>
    </div>
</div>

CSS

.content-wrapper {
    width: 1000px;
    margin: 0 auto;
}

.row {
  width: 100%;
  padding-top: 20px;
}

.row:nth-child(odd) {
    background-color: #f5f5f5;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.col {
  float: left;
}

.col-lg-3 {
  width: 25%
}

.col-lg-9 {
  width: 75%
}

.profile-heading {
   margin-top: 50px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
}

.profile-heading > .panel {
  position: relative;
  background-color: inherit;
  margin: 0 auto;
  width: 1000px;
  border: none;
}

Answer 2

If you know the height of the absolute-positioned element, it would be easy. Simply add padding / margin or placeholder div equal to the known height.

If the height is dynamic, you'd have to resort to jQuery/JavaScript.

Have a look at my demo which shows the default behaviour and the methods mentioned:

// get the absolute-positioned element
var abs = $("#dynamic .absolute");

// get height of absolute-positioned element
var absHeight = abs.height();

// insert placeholder div with height equal to absolute-positioned element
$("<div class='placeholder'></div>").height(absHeight).insertAfter(abs);

section {
  position: relative;
  padding: 1em;
  margin: 1em;
  border: 1px solid #CCC;
}

section div {
  border: 1px dashed blue;
}

.absolute {
  position: absolute;
  top: 0;  z-index: 1;
  border:1px solid red;
  height:50px;
}

#margin .absolute+div {
  margin-top:50px;
}

#padding .absolute+div {
  margin-top:50px;
}

.placeholder { height:50px; border:none }

#dynamic .absolute {
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Default Behaviour</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

<h3>Known height: top margin</h3>
<section id="margin">
  <div class="absolute">position:absolute</div>
  <div>normal div with margin-top</div>
</section>

<h3>Known height: top padding</h3>
<section id="padding">
  <div class="absolute">position:absolute</div>
  <div>normal div with padding-top</div>
</section>

<h3>Known height: placeholder div</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div class="placeholder"></div>
  <div>normal div</div>
</section>

<h3>Dynamic height: JavaScript/jQuery</h3>
<section id="dynamic">
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

jsFiddle: https://jsfiddle.net/azizn/mq6bejhf/