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

When a radio button is chosen, multiple text fields must be completed in order to validate the form

I am working with a set of 3 radio buttons. If the last option, labeled "In Home," is chosen, then all 4 of the text fields must be filled in for the form to validate. While I have found information on how to achieve this with checkboxes or a single text f ...

javascripthtmlvalidationradio-grouprequired-field

Adjust the top margin of a div to match the height of the screen within an iframe, ensuring cross-browser

Trying to adjust the margin-top of a div to 100% of screen height within an iframe seems to be causing issues with jQuery, as it either returns 0 or inaccurate values. While CSS3's 100vh can work as an alternative, it may not be supported in older an ...

javascripthtmlcss

The function setCustomValidity() will continue to display even after the form has been successfully filled out

My form is very simple and I am trying to validate it using the required attribute: <form name="form"> <label for="Header">Title</label> <input type="text" class="span5" name="Header" ng-model="Message.header" placeholder="Title" on ...

javascripthtmlangularjsrequired

Utilize Multidimensional Arrays in HTML

I have a pair of fields called url and id. <input type='url' name='data[web][url]'><input type='number' name='data[web][id]'> <input type='url' name='data[web][url]'><input t ...

phphtmlarrays

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website. However, I have encountered an issue where the icon does not display correctly ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is the HTML Page loading before the AJAX call is made?

On my HTML Page, I have a button tag that looks like this: <button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button> However, when attempting to access certain parts of the alreadyFriends function shown b ...

javascripthtmlajaxangularjs

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Incorporating a navigation bar at the top and a sidebar on the left side of the lower half of an HTML webpage

Currently utilizing materializecss and bootstrap, I am aiming to create a design that resembles: --------------------------------- --------------------------------- | | | | The objective is to split the page into two horizontal sections. The ...

htmlcsstwitter-bootstrap

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Utilize Flexbox to create a layout with 3 divs, organized into two columns where one column

I am attempting to transform <div></div> <div></div> <div></div> Three consecutive divs into the following format. Div 1 is red, div 2 is green, and div 3 is blue. I have achieved this using floats, like so: .div1 { ...

htmlcssflexbox

Looking to achieve a mouse over effect in jQuery?

For the past few days, I've been grappling with a question that I just can't seem to find the right answer to. I'm trying to create a mouseover effect similar to the one on this template (the Buddha at the top of the page). Despite my best e ...

javascriptjquerycssmouseover

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

javascriptcssionic-frameworkspinner

What is the method for adding color to the select and option fields?

On my website, I have created a contact form and I am trying to customize the select field by adding colors like other fields. However, when I choose an option from the select field, it is not showing up. Can you please help me identify what mistake I migh ...

htmlformscss

Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...

cssgoogle-chromehtml

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

"Illuminating the way: Adding a search bar to your

Looking to enhance my WordPress blog with a search bar, I opted for a generic HTML approach over using get-search-form(). Here is the code snippet from my theme: <div class="input-group"> <input type="text" class="form-c ...

htmlwordpresswordpress-theming

Automatically filling in related information in multiple input fields after choosing a value in a specific input field using JavaScript

My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method. I'm looking to automatically populate the second input field with the corresp ...

javascriptjqueryhtml

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

csstwitter-bootstrap-3bootstrap-multiselectkendo-window