Arrange the position of a div based on the location of another div

I'm working on a webpage that has 3 divs. The first one, labeled as "A," is positioned at the top of the screen, while the second one, labeled as "B," is centered on the screen.

My goal is to always position the third div, labeled as "C," according to the position of div "B" since this is a responsive page.

This page is built using Twitter Bootstrap.

<div class="container-fluid">

        <div class="row-fluid section" id="section-home">
            <div class="row-fluid">

                <div class="span12">
                    <p class="text-center" id="contact"><a href="#">A</a></p>                                               
                </div>

                <div class="span12" id="support">
                    C                                   
                </div>

                <div class="row-fluid">
                    <div class="span12 text-center" id="logo">

                        <nav id="mainNav">  
                            <ul>
                                <a href="#">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid section" id="section-cars">
            <div class="span12"></div>
        </div>


        <div class="row-fluid section" id="section-motorcycles">
            <div class="span12"></div>
        </div>


        <div class="row-fluid section" id="section-boats">
            <div class="span12"></div>
        </div>


        <div class="row-fluid section" id="section-contact">
            <div class="span12"></div>
        </div>
    </div>

http://jsfiddle.net/dU9cZ/

Could anyone provide guidance on how to achieve this?

csshtmlpositionresponsive-design

Answer №1

When working with CSS, it's important to understand how `absolute` positioning functions in relation to parent elements. The position of an element set as `absolute` will be determined by the closest parent element that has a specific `position` attribute defined. To make one div (let’s say "C" in your illustration) dependent on another div ("B"), you need to nest "C" within "B".

Once nested, you can apply styles to "C" such as `position:absolute;right:100px;top:-30px;`, adjusting these values according to the desired distance from the right side of "B" and the height of "C". If "B" is also given a defined `position` value like `relative`, then the positioning of "C" will be relative to "B".

Although it might seem contradictory to use `absolute` instead of `relative` for this purpose, the reason behind it is that CSS interprets `relative` as being relative to the element's normal position in the document flow.

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 is preventing me from getting this straightforward CSS transition to function properly?

I'm really struggling with CSS transitions and trying to figure out why my transition for the div class=text is not working as expected. const menuToggle = document.querySelector('.toggle') const showCase = document.querySelector('.s ...

javascripthtmlcss

Can a fully operational "contact us" page be created with just HTML and CSS?

Is it feasible to create a "contact us" page that operates properly using only HTML/CSS? For instance, allowing a user to visit the "contact" page and input their email address and message, which would then be sent directly to my email. Would this be ach ...

javascripthtmlcss

Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these thi ...

htmlcss

When incorporating an array into a span tag, only the final string is being shown by the loop

I need assistance with changing the content of a span tag every 1.5 seconds, but currently it only displays the final word in the 'list' array. Below is my JavaScript code: var list = [ "websites", "user interfaces" ]; setInterval(fun ...

javascripthtmlarraysloopsfor-loop

Submitting form occurs upon selecting autocomplete suggestion

When a user fills out my form and hits the Go button or presses Enter, the form submits. However, when typing in the text box, it triggers an auto-complete feature after just one character. If the user uses arrow keys to navigate through the auto-complete ...

javascriptjqueryhtmljspautocomplete

Ways to make a background stretch infinitely in the x-axis

Currently, my header has a grey background with a width of 100% and a maximum width of 1000px. To extend the grey background beyond the 1000px limit, I have a separate div with an absolute position behind the header div. The issue arises when the user scro ...

htmlcssbackgroundrepeat

Running a repeated script

I recently discovered a fantastic script called Typer that creates a typewriter effect. However, I noticed that it does not have a built-in method to loop the animation once it reaches the end. Does anyone have any suggestions on how to achieve this? t ...

javascriptjqueryhtml

"Exploring the variations in design between wordpress.com and self-hosted wordpress

I'm currently puzzling over the source of the disparities in style between my Wordpress site hosted elsewhere and my identical theme on Wordpress.com. It's perplexing to see such contrasting appearances while I migrate my blog. After some irrele ...

csswordpressstyleswordpress.com

Toggle sidebar visibility with a button click

Currently, I am working on a sidebar that can collapse and expand when a button is clicked. If you wish to take a look, I have created a JSFiddle for reference: https://jsfiddle.net/4er26xwp/1/ The challenge I am facing lies here: document.getElementsByC ...

javascripthtmlcss

Styling WordPress twenty seventeen custom header with CSS tags

I have encountered a problem on my website where the custom header is causing issues on all pages except the home page. Specifically, in the custom header div element there is a style tag adding a margin-bottom of 82px. Despite searching through template p ...

phphtmlcsswordpresswordpress-theming

Accessing and assigning an ID to a particular line in a text file using JavaScript

I have a plain text document formatted as follows... Hello . world . . . . its me The code I am currently using to access the text file is as follows: <head> <script type="text/javascript"> function fetchTextFile(); </script> < ...

javascriptjqueryhtmltwitter-bootstrap

Innovative Functions of HTML5 LocalStorage for JavaScript and TypeScript Operations

Step-by-Step Guide: Determine if your browser supports the use of localStorage Check if localStorage has any stored items Find out how much space is available in your localStorage Get the maximum storage capacity of localStorage View the amount of space ...

javascripthtmltypescriptlocal-storage

All submenus will be shown simultaneously

All sub menus are displayed at once when any button that triggers the event is clicked. For a live demonstration, click here: https://jsfiddle.net/saidmontiel/734szqLg/9/ I'm interested in having only one submenu appear at a time. I am aware that ...

javascriptjqueryhtmlcss

Arranging Html Bootstrap Columns in a vertical stacking layout instead of being displayed next

Hey there, I've been encountering an issue where my columns are stacking on top of each other instead of being positioned side by side. Take a look at this screenshot of my page: The content above the shopping cart should ideally be aligned to the rig ...

htmlcssangularbootstrap-4

Sliding panels with Jquery

I've created some basic panels that slide in and out horizontally. My goal is to hide all content except the first panel when the page loads. When a link to other panels is clicked, the current content will slide left to be hidden and new content will ...

jqueryhtmlcssslidingpanels

The issue of why a hyphenated id selector does not function properly in javascript

Just delving into the world of JavaScript, I recently started learning how to code in this language. Currently, I am working on a JavaScript function that counts characters. Javascript function CheckFieldLength(fn, wn, rn, mc) { var len = fn.value.leng ...

javascriptjqueryhtml

Moving the center div to the top of the content for mobile screens

Would like some help in positioning the col-md-6 div to the top of my website on mobile, causing both col-md-3 elements to stack on top of each other. <div class="row"> <div class="col-md-3"> <div class="box"> & ...

htmlcsstwitter-bootstrapbootstrap-4

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

One of the challenges I'm facing is with a video element that I want to hide gradually when clicking on another element. The issue is that after the animation completes, the video ends up hidden at the top-left corner of the screen instead of at the c ...

javascripthtmlcss

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Imagine I have a string like <p>hi my name is john</p>. I know that I can use the span element to target specific characters and apply different styles using CSS. But what if I want to style "name" and "john" differently from each other and the ...

cssxhtml