Steps for creating a one-sided container in CSS

I've created a container class with the following CSS:

.container {
   margin: 0 auto;
   width: min(90%, 70.5rem);
}

This setup centers the content on the page within the container, which is great for organization. However, I'm looking to create a custom container where the margin only appears on the left side, allowing the content to overflow on the right side of the page. How can I modify my code to achieve this effect? I've tried using margin-left before, but it's not responsive like the current code I have set up.

htmlcss

Answer №1

Follow these steps to achieve the desired result. I have included both methods for easy comparison:

.wrapper {
  margin: 0 auto;
  width: min(90%, 70.5rem);
}

.new-wrapper {
  margin-left: calc((100% - min(90%, 70.5rem))/2);
}

[class] {
  background: red;
  height: 50px;
  margin-block: 10px;
}

body {
  margin: 0;
}
<div class="wrapper"></div>

<div class="new-wrapper"></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

Tips for positioning two elements side by side on a small screen using the Bootstrap framework

Greetings! As a beginner, I must apologize for the lack of finesse in my code. Currently, I am facing an issue with the positioning of my name (Tristen Roth) and the navbar-toggler-icon on xs viewports. They are appearing on separate lines vertically, lea ...

javascripthtmlcsstwitter-bootstrap

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax

Tab order in Angular Forms can be adjusted

While constructing a two-column form for simplicity, I utilized two separate divs with flexbox. However, the tabbing behavior is not ideal as it moves down the form rather than moving across when using the tab key to navigate between inputs. I am seeking a ...

htmlangularangular-forms

Is there a way to transform BASE64 encoded HTML into a GIF format using ColdFusion?

I am getting a BASE64 encoded message from a WebService. This message is an interpretation of an HTML page and I can use pre-existing ColdFusion functions to convert and showcase it. However, my requirement now is to generate a GIF image of the HTML conten ...

htmlcoldfusionbase64gif

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

Creating a new object store in IndexedDB on Windows 8

Encountering issues with creating an object store in IndexedDb while trying to build a Metro app using Javascript. The code snippet below shows my attempt within the 'dbReq.onsuccess' function that is supposed to create the object store upon succ ...

javascripthtmlwindows-8windows-runtime

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

Looking to create a column layout using flexbox with three divs that span the full width of their parent container while maintaining a single line height. If the content in the center div overflows, I want it to display an ellipsis at the end. Check out t ...

cssfirefoxflexbox

Ways to activate a function upon validation of an email input type

Within my HTML form, there is an input type="email" field that requires a valid email pattern for acceptance. I am attempting to send an AJAX request to the server to confirm whether the entered email already exists in the database after it has been verif ...

javascriptjqueryhtmlajax

Using HTML5 datetime-local to only accept dates in the format Y-m-d

I am currently working on a form that includes a datetime-local input field. <input type="datetime-local" id="datetime" /> After clicking on the today button, the date is automatically set to today's date like this: 2018-11-05 --:-- However ...

jqueryhtmlformsdatetime

break-word property not functioning correctly within pre tag

Each row in my dataTable triggers a modal to appear: <div id="verifyModal" class="modal"> <div class="modal-content"> <h2>Verify # <span id="verify-modal-id"></span></h2> <pre><code class="" id="verif ...

htmlcssword-wrap

Implement a jQuery loading animation triggered by scrolling down the page

Can anyone offer guidance on how to trigger an animation as you scroll down a webpage? I've come across this feature while browsing through this website: I would love to include code examples, but I'm unsure of where to start with implementing t ...

javascriptjqueryhtmlcss

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

Align the UL in HTML to be on the same line as other spans

When examining this jsFiddle demonstration at the following link: http://jsfiddle.net/jrXwf/1/ The UL tag showcases a star rating, with accompanying text displayed on the line below it. Is there a method to have everything appear on a single line? Appre ...

htmlcss

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far. As for the second shape, I'm having difficulties cre ...

csscss-animationscss-shapes

Is there a way to shift the text to a new line within a JLabel without using HTML?

To create a line break in the text of a JLabel without using HTML, you can use the following method: JLabel label = new JLabel("Line\nNext line"); Is there a way to achieve this without relying on HTML? Thank you! ...

javahtmlswingjlabel

Webix UI - Struggling to create dynamically responsive components during screen resizing

Can anyone guide me on how to make my Webix UI control responsive in the free version available at ? It seems to be acting unpredictably due to the AngularJS integration code I'm using. I have attempted various solutions like media queries, redraw, a ...

htmlcssangularjsresponsivewebix

Using session variables on a different php page

Having trouble using a session variable in another page? I fetched data from a database and stored it in a variable, but when I attempt to use it on another page, I get an error saying 'undefined index'. See the code below - can someone help me s ...

phphtml

What is the best way to ensure a grid remains at 100% width when resizing a browser window?

Within the div element, I have two child divs. One has the class col-md-2 and the other has the class col-md-10.Check out a sample view here In the image provided, the div containing hyperlinks (Database edit, invoice, preview) is not taking up 100% width ...

htmlcsstwitter-bootstrap

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

htmlcss

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

javascriptphpjquerycsswordpress