Placing a div underneath a different element on a webpage

I am struggling with the placement of a div on my webpage. I have tried various methods to position it beneath two other elements without success, despite following advice from online resources. Here is the code I have been working with:


          #headingmain {
            position: relative;
            top: 150px;
            font-family: Comic Sans MS;
          }
          #main {
            margin: 0 auto;
            border-radius: 25px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
          }
          #para {
            position: relative;
            top: 150px;
            font-family: Comic Sans MS;
          }
          #test {font-family: Comic Sans MS;}
        
      

          <!DOCTYPE html>
          <html>
          <head>
          <title>Title</title>
          <link rel="stylesheet" type="text/css" href="style.css">
          </head>
          <body>
          <h1 align="center" id="headingmain">Title</h1>
          <p id="para" align="center">para</p>

          <div id="main" align="center">
            <p id="test">Test</p>
          </div>
          </body>
          </html>
        
      

I have exhausted all available tutorials in an attempt to properly position the div below the existing elements. Any guidance or assistance would be greatly appreciated.

Thank you in advance!

Answer №1

Check out this straightforward example showcasing the desired positioning: http://jsfiddle.net/ah3djs82/7/

In the provided code snippet, there are two nested div elements (#first > #second) with a third div (#third) positioned below.

<section>
  <div id="first">First
    <div id="second">
      Testing
    </div>
  </div>

  <div id="third">Third</div>
</section>

All three of these divs are enclosed within a container responsible for horizontal alignment and some top margin adjustments.

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

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

Creating a visually appealing layout with three equal columns side by side in Bootstrap 4

I am trying to keep my CSS efforts minimal by utilizing Bootstrap for a simple layout. However, I am encountering an issue with a horizontal scroll. If anyone has a solution or can point out what I may be missing, please share. <!DOCTYPE html> < ...

Python scripts are unable to perform file uploads through an HTTP form, unlike PHP scripts which are compatible

Currently, I am working on a Python project where I need to upload a text file through HTTP to my server. Initially, I used an HTTP form for convenience and the upload process was successful. However, now I want to automate the file selection process by ha ...

What is the best way to save a current HTML element for later use?

Here is a simple HTML code that I would like to save the entire div with the class test_area and then replicate it when needed. Currently, my goal is to duplicate this div and place the clone underneath the original element. How can I achieve this? Unfortu ...

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

Tips for executing an href action within an iframe (using colorbox) following the completion of a PHP script

I am currently trying to figure out the best way to make a link open in an iframe (using colorbox) after a php script has finished processing. The reason behind this necessity is that within the php script, I generate a png image from a canvas element on t ...

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png Although I have made some progress, I'm struggling to add a border outline. H ...

Introducing the innovative Icon Collapsable JQuery - a versatile tool that

I'm looking to set custom icons for the JQuery Collapsable view without having to make changes to the default JQuery CSS and .JS files. You can take a look at my starting point on jsFiddle here: http://jsfiddle.net/jakechasan/M7LLU/ Although I' ...

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

I've customized this tab to have my desired style: import { withStyles } from "@material-ui/core/styles"; const StyledTab = withStyles((theme) => ({ root: { backgroundColor: "yellow", }, }))((props) => { const { shouldSetBackgroundCol ...

Breaking down a div with jQuery - tips and tricks!

I have a question regarding jQuery. Consider the following structure: <div class="page"> <p>Lorem ipsum....</p> <p>Lorem ipsum....</p> ... </div> I want to transform it into this format: <div class="pa ...

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

Is it possible to utilize HTML as a platform for interfacing with a C/C++ program?

As I work on a new product with USB interface, I need to create a control app for it. However, my GUI programming skills are limited, so I have thought of using a local web page within the app's installation directory as the interface for the program. ...

Could my HTML security measures be vulnerable to exploitation?

I have successfully developed a function that accomplishes the following: It accepts a string as input, which can be either an entire HTML document or an HTML "snippet" (even if it's broken). It creates a DOMDocument from the input and iterates throu ...

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

Leverage CSS to manipulate image attributes

Is it possible to use CSS programmatically to set the attributes of my img tag? <span><img class="img-dollar"></img></span> <span><img class="img-royalty"></img></span> I am looking for a way to specify t ...

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...