Positioning CSS Div After Absolute Positioning Div

Can anyone provide guidance on how to smoothly continue the flow of a page using CSS?

Let me explain my current dilemma:

I have 3 divs - div 1 (parent), div 1 (child), and div 2 (normal). The parent div is absolute, the child is relative. Everything seems fine so far. However, I am facing an issue where the next normal div is pushed up to the same line as the absolute div (due to disrupting the page flow by setting the parent div to absolute).

My question is: How can I position the normal div below the div with absolute positioning? Would offsetting the margin-top property solve this issue?

Your help is greatly appreciated!

Check it out here: https://jsfiddle.net/veLgmdt1/

Answer №1

If the height of the absolutely positioned element is known, you can easily adjust it by adding padding, margin, or a placeholder div with the same height.

However, if the height is dynamic, using jQuery or JavaScript would be necessary.

Check out my demonstration below which illustrates the default behavior and the solutions mentioned:

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

// Capture the height of the absolutely positioned element
var absHeight = abs.height();

// Create a placeholder div with the same height as the absolutely 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 Behavior</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/

Answer №2

http://jsfiddle.net/veLgmdt1/6

Improved the HTML structure using rows and floated columns to eliminate the 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the implications of sending a query for every individual input field alteration in a large online form?

I am creating a system for an educational institution where faculty can input scores using php and html. The layout is similar to an excel sheet, with 20 questions per student and about 60 students on each page. My dilemma is whether it's acceptable ...

Toggle menu using jQuery to show and hide options

I'm currently working on a menu that should open when the button is clicked once and close when clicked again. I had done this before but I seem to have forgotten how to achieve it. Here is the code snippet that I tried to use: var main = function() ...

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

In Django, I am assigning the URL as the category but encountering an error that is expecting a semicolon in JavaScript

I am currently trying to set the category as the URL in Django but I am running into an error that states '; expected.javascript' {% for category in all_categories %} <div onclick="location.href='{% url 'category' categ ...

Tips for ensuring my website displays consistently on different screen sizes

Is there a way to ensure that my website, informatiestuderen.nl, appears consistent on both small screens (such as phones) and large screens (like desktop computers)? Currently, my website is not functional on mobile devices. Take, for instance, carriere ...

Determine the total of the final column in recently added rows by utilizing JavaScript

I have a table where users can dynamically add rows as needed. I am looking to implement a feature that will display the total of the last column in a text box underneath the table using JavaScript. If real-time calculations are not feasible, then I am ope ...

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

`CSS alignment issues`

Below is the HTML and CSS code that I am working with: .divOuter { width: 50%; margin: 0 auto; } .divInner1, .divInner2, .divInner3 { border: 1px solid; float: left; width: 150px; height: 150px; margin-left: 3px; margin-right: 3px; ...

Mixing strings with missing slashes in links

console.log(mylink) When using the console to log mylink, the expected result is a normal link like http://example.com/something.jpg. I tried concatenating it as shown below: var html = '<div id="head" style="background:linear-gradient(rgba(0, 0 ...

Can you help me adjust the height of my banner and center its content vertically?

Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height. The code snippet is as follows: <div class="container-narrow" style="heigth: 80px;"> <img src="#" width="52" ...

Tips for detaching jQuery from HTML

I have attempted multiple combinations without success. Below is my current code (all within the HTML document): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="te ...

How can I align text to the center and set the text color at the same

Looking to place text in the center of a colored box? Although attempting to center the text, you may find that it remains towards the top rather than in the middle of the box. How can you shift the text down so it aligns with the middle of the backgroun ...

Utilize PHP and a dynamic web framework like Spry to showcase data from two MySQL tables in an

My goal is to effectively showcase data from two separate tables in mysql using PHP and spry. Initially, I considered implementing spry tabbed panels, but I am uncertain of its feasibility. Essentially, I envision the tab names being populated from one tab ...

Imagine watching an image shrinking down and appearing in the center of the screen

I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...

Place the div's scrollbar at the beginning of its content

Recently, I put together a custom CSS modal that includes a scrollable div (without the modal itself being scrollable). Interestingly enough, when I initially open the modal, the scrollbar of the div starts at the top as anticipated. However, if I scroll d ...

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

Enable the button when there is an error after submission in AngularJS

Has anyone encountered issues with dynamically disabling a button? I noticed that my API delays for 2 seconds to mimic a slow connection. I expected the submit button to be disabled upon submission and then re-enable itself. In HTML, manually disabling t ...

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...

Attempting to incorporate every item from a for loop into an array using JavaScript

I have an index.html file containing a display of a mySQL table: <body> <div class="container"> <table align="center"> <tr> <th bgcolor="#f0a00c">Col1</th> <th bgcolor="#f0a00 ...

The functionality of jQuery's $.inArray does not seem to be compatible with ASCII characters

I've demonstrated the issue in this jsfiddle. The scenario involves two black coins - when one black coin is placed on another, it should trigger an alert saying "can't kill your own kind" and return the coins to their original positions. However ...