What is the method for absolutely positioning an element with separate targets for the `left` and `right` properties?

Seeking a complex CSS result that may seem impossible.

Consider the following scenario:

<div class="div1">
  <div class="div2">
    <div class="div3">
      <div class="div4"></div>
      Hello World
    </div>
  </div>
</div>

div {
  box-sizing: border-box;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}

.div1 {
  background: rgba(255, 0, 0, 0.5);
}

.div2 {
  width: 800px;
  margin: 0 auto;
  
  display: flex;
  
  background: rgba(0, 255, 0, 0.5);
}

.div3 {
  position: relative;
  background: rgba(0, 0, 255, 0.5);
}

.div4 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  
  background: rgba(255, 0, 255, 0.5);
}

The goal is to have .div4 touch the left edge of .div1 and the right edge of .div3.

Current layout

With position: relative; on .div1

Desired outcome

Interested in alternative solutions to achieve the same effect!

View code example here

htmlcssflexboxpositionabsolute

Answer №1

Perhaps I'm mistaken, but have you considered using 3 div elements for this task?

<div class="div1">
  <div class="div2">
    <div class="div3">
      Hello world
    </div>
  </div>
</div>

div {
  box-sizing: border-box;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}

.div1 {
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}

.div2 {
  width: 800px;
  margin: 0 auto;
  
  background: rgba(0, 255, 0, 0.5);
}

Once you've completed that, place the text "hello world" inside div3 and assign any background color you desire to div3.

.div3 {
  background-color: purple;
}

I would suggest a slightly different approach with CSS:

.div1{
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  border: 1px solid black
}

.div2 {
  width: 800px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  background: rgba(0, 255, 0, 0.5);
}

.div3 {
  background-color: purple;
  border-right: 1px solid black;
}

I believe this method should work, ensuring that all borders are exactly 1px without overlapping.

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

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...

twitter-bootstrapcssbootstrap-4font-awesome

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

cssreactjsflexbox

Does a specific HTML element exist that is unable to have JavaScript within its content?

Let me pose a question, and while the answer may be "no", it never hurts to inquire... I am in need of taking in formatted text as HTML markup and later displaying the HTML to showcase the formatted text. This is an extremely common situation. Even popula ...

htmlbrowserxss

Limitations on Embedding Videos with YouTube Data API

I have been using the Youtube Data API to search for videos, but I am encountering an issue with restricted content appearing in the results. Specifically, music videos from Vevo are showing up even though I only want videos that can be embedded or placed ...

javascripthtmljsonapiyoutube

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

htmlcssflexbox

Adjust the width of the scrollbar for the <aside> section

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-left ms-3" id="sidenav-main"></aside> Within this aside element, I have implemented a scrollbar. However, I am seeking to adjust ...

htmlcsslaravelbootstrap-4

Stable navigation bar implemented with a grid design

I'm struggling with creating Navbars in Grid Layout. https://codepen.io/Aeshtray/pen/BdqeZL For mobile view, I want the Navbar to be fixed horizontally (as currently coded), but once reaching a width of 500px, I need it to become vertically fixed on ...

csslayoutnavbarcss-grid

Displaying a URL inside a div upon clicking a specified href link in an Angular application

After hours of searching on various search engines, I am still unable to find the solution to my problem. My goal is to display the URL in a div once it has been clicked using $http for dynamic links. Here's an example of what I'm trying to achi ...

htmlangularjs

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

javascripthtmlcss

JavaScript code is not functioning properly on Internet Explorer 10

Upon selecting an option, I need to activate buttons. This functionality works smoothly in all browsers except for IE10. The HTML for the select element: <select id="tenants" name="tenants" size="10" class="reportOption" onchange=""> <option va ...

javascriptjqueryhtml

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...

javascripthtmlcss

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Redirecting after executing JavaScript code

Is it possible to implement a redirect after the subscription script for push notifications has been executed successfully? <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ ...

javascripthtmlpush-notification

Ways to conceal specific content within a text using CSS

Help me with the updated code <html> <title>css</title> <head> <style> #st { z-index: -114; margin-right: -80px; } </style> </head> State Code : <span><span id="st"></span>Maharashtra - MH ...

htmlcss

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

javascripthtmlvue.jsvue-component

How can I remove the gaps between Bootstrap panels on a website?

The Issue https://i.stack.imgur.com/I5EFR.png My problem is with the spacing between the panels, highlighted in red. I've attempted to remove them by using the following CSS: .panel { margin-top: 0; margin-bottom: 0; padding-top: 0; ...

htmlcsstwitter-bootstrap

What was the reason behind resolving the 0 height body problem by adjusting the WebView Layout Parameter?

My Xamarin WebView was not displaying my HTML correctly. Even though it was set to fill the whole screen, the body height in the HTML remained at 0px. In addition, I had a div in the HTML with the following style: position:absolute; top:0px; bottom:0px; ...

androidcssxamarinwebviewxamarin.forms

What is the best way to intelligently cache specific segments of a page in PHP?

Issue: I am working on a website with over 50,000 pages, the majority of which are only updated once at the time of creation. I am in the process of implementing caching for these pages since they do not require frequent content changes. However, I am fa ...

phphtmlcachingmeta-tags

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

javascriptcssreactjswebpackreact-boilerplate