Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

I have a parent container with two child elements inside. I want the first child to align to the left side and the second child to align to the right side, but not starting from the exact center point. They should be positioned slightly off-center by -100px and +100px respectively. From that starting point, they should fill the remaining width of their respective sides of the screen. Additionally, when the window is resized, they should remain in the same position relative to the center, minus the defined X amount of pixels.

Here's an example of what my code currently looks like:

<div className={classes.backPartDivs}>
  <div />
  <div />
</div>

backPartDivs: {
  width: '100%',
  position: 'absolute',
  top: 0,
  zIndex: 4,
  left: 0,
  height: 68,
  '& > div': {
    '&:first-child': {
      position: 'absolute',
      left: 'calc(-50vw + 50%)',
      height: 68,
      width: '100%',
      backgroundColor: 'red',
      boxShadow: theme.shadows[18],
    },
  },
},
javascriptcssreactjsmaterial-uijsx

Answer №1

If you like this style, feel free to use the CSS code in your project:

.main-container{
    width: 100%;
    height: 68px;
    background:red;
    display:flex;
    padding:0 100px;
}
.main-container div{
    width:100%;
    height:68px;
    margin:0 10px;
    background:yellow;
}
<div class="main-container">
  <div></div>
  <div></div>
</div>

Answer №2

To create spacing between nested div's and include margin-left: 100px, you can utilize the flex property.

Here is a demonstration:

.container {
    display: flex;
    outline: 1px solid blue;
}

.container > div:first-of-type {
    width: calc(50% - 50px);
    background-color: orange;
}

/* ----- Flexbox gap: ----- */
.container > * + * {
    margin-left: 100px;
    width: calc(50% - 50px);
    background-color: chocolate;
}
<div class="container">
    <div>
      left
    </div>
    <div>
      right
    </div>
</div>

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

Is WebStorm with Node Supervisor being utilized to eliminate the need for restarting after every code modification?

Currently, I am utilizing WebStorm as my node IDE and have found it to be quite impressive. However, one issue I am facing is figuring out how to incorporate node supervisor into my workflow within WebStorm. Has anyone successfully managed to set this up ...

javascriptnode.jsintellij-ideawebstormnode-supervisor

A more efficient method for passing a function as an argument using the keyword "this"

When it comes to passing a function as an argument that uses the this keyword, is there a preferred method or correct way to do so? An example would be helpful in understanding this concept better: For instance, if I want to fade out an object and then r ...

javascriptjquery

Modifying the values of array elements in MongoDB

I am currently attempting to modify specific elements within an array. This particular array consists of objects that have two distinct fields. The displayed output from my view is as follows: Each line in the display corresponds to the index of the objec ...

javascriptnode.jsmongodb

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

I've implemented a JavaScript code snippet that loops through an array of fields to find specific properties and then adds them to a dictionary. For another example, you can check out this site. return this.getFields() .reduce((mappings, field) =& ...

javascripteslintcode-formatting

Having trouble downloading a PDF file on a local server with React and the anchor tag element

Having trouble downloading a pdf file from my react app to my Desktop. I've reached out for help with the details How to download pdf file with React. Received an answer, but still struggling to implement it. If anyone new could provide insight, that ...

javascriptpdfreactjsreact-router

Tips on utilizing the Material Ui Select input property?

Trying to understand why material-ui's InputBase is functional while regular HTML input is not. The documentation defines the input prop as follows: An Input element; does not have to be a material-ui specific Input. Successful example: import Sele ...

javascriptreactjsmaterial-ui

SyntaxError: An invalid character was encountered (at file env.js, line 1, column 1)

This marks my debut question so kindly indulge me for a moment. I recently stumbled upon a guide that outlines how to dynamically alter environment variables in a React project without the need for re-building. You can find the guide here. The method work ...

javascripthtmlreactjsenvironment-variables

Obtain and utilize the background color to easily implement the same color in another window

For my Chrome Extension project, I am looking to retrieve the background color of the current page and then set the background color of a window to match. Can someone guide me on how to accomplish this using JavaScript (with or without jQuery), and if ne ...

javascriptcssgoogle-chrome-extensionwindowbackground-color

Ways to Soothe Long Polling

Currently, I am developing a basic chat feature using AJAX in a function that triggers a setTimeout call to itself upon successful execution. This occurs approximately every 30 seconds. While this setup serves its purpose, I am seeking a more immediate not ...

javascriptjqueryajaxlong-polling

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

cssbootstrap-4

What is the process for utilizing the TypeScript compiler with nodejs?

I have a sample code saved in a file called hello.ts Upon the completion of nodejs setup on Windows, execute the following command to install typescript: npm install -g typescript Is there a way to compile hello.ts directly with node.js? While using "T ...

javascriptnode.jstypescript

ng-html-bind for a label with a checkbox

Currently, I have a view that uses the standard bootstrap layout for checkboxes. In this layout, the input is located within the label tag. <div class="checkbox"> <label ng-bind-html="vm.trustedHtml"> <input type="checkbox" ng- ...

javascripthtmlangularjshtml-sanitizing

Ways to properly exit a function

What is the best way to pass the apiKey from the createUser function in User.ts to Test.ts in my specific scenario? User.ts interface User { url: string, name: string, } class User{ async createUser( user: User ):Promise<void> { le ...

javascripttypescripttestingtypes

custom field component for react-hook-form

I have been working on creating a form field component that can be utilized at both the root form level and as a nested field. export type FirstNameField = { firstName: string; }; type GenericFormType<T, NS extends string | never = never> = NS ext ...

reactjstypescripttypescript-genericsreact-hook-formreact-typescript

A method for combining multiple arrays into a single array within a For loop

I am trying to combine multiple arrays of objects into a single array. Here is an example with a transaction array that contains two different arrays: transaction: 0:(3) [{…}, {…}, {…}] 1:(2) [{…}, {…}] I would like the combined result to loo ...

javascriptangularjs

Utilize CSS to display line breaks within a browser output

If I wrap text in a <pre> element, line breaks will be displayed in the browser without needing to use <br/> tags. Can this same effect be achieved by utilizing CSS with a <div> element? ...

css

Obtaining the data object from a tag in Internet Explorer 8

When using Chrome, the following line of code provides a useful result: $('[data-buyername]').data() It will retrieve the value associated with the tag data-buyername='somethingArbitrary' However, in IE8, the .data() function does no ...

javascriptjqueryhtmlinternet-explorer-8

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Emphasize specific lines within a textarea

I am facing a challenge with a textarea dedicated to validating telephone numbers. My goal is to highlight the lines that contain invalid telephone numbers by adding two asterisks in front of them. However, I'm struggling to figure out how to highlig ...

javascriptjqueryhtml

RequireJs is failing to load a script based on its name

Recently, I delved into the world of RequireJs to enhance my understanding. However, I encountered a hurdle while trying to load a JavaScript dependency using its custom shortened name. Despite my efforts, I can't seem to figure out what I'm doin ...

javascripthtml