CODEWITHSUNDEEP
htmlcss
cebo
cebo

Reputation: 818

Override max-width margins of parent container?

I am setting up a max-width on my site's main container so that it doesn't appear comically wide on large screens, resulting in left and right margins on the main container. One piece of content we have is dynamically generated and could potentially be very wide. On large screens it's currently pushed over by the main containers left margin, aligning it with the rest of the content of the page, but I would like for it to align with the true left edge of the body instead of the edge of the container.

This picture shows some regular content with the expected margins, and my large content (a tournament bracket) overflowing off the right edge of the screen. I'd like to shift it to the very left. Large content for a small container

Is there any way to do this without having to move it outside of the container? Additionally, is there an easy way to make it only do this when it would otherwise be larger than the main container (or even better, only when it would go off the right edge of the screen)?

Upvotes: 0

Views: 871

Answers (2)

Arpit
Arpit

Reputation: 325

Here's a generic solution that keeps the child element in the document flow:

child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

We set the width of the child element to fill the entire viewport width, then we make it meet the edge of the screen by moving it to the left by a distance of half the viewport, minus 50% of the parent element's width.

Demo:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}
<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Browser support for vw and for calc() can generally be seen as IE9 and newer.

Note: This assumes the box model is set to border-box. Without border-box, you would also have to subtract paddings and borders, making this solution a mess.

Note: It is encouraged to hide horizontal overflow of your scrolling container, as certain browsers may choose to display a horizontal scrollbar despite there being no overflow.

Upvotes: 2

user16716458
user16716458

Reputation:

You can position it relative so that you will be able to use left property and position it to left end , using appropriate values ( can't say which value will work as you haven't provided code )

If you want to position that when it is larger then you can apply a JS function and call it to measure width ( spanning that is offsetWidth) of your element .

If it's value exceeds a certain value then
apply style.position = "relative" ,
style.left = "somePreferredvalues"
else apply style.position = "static"

I will be sure about the position being absolute or relative if you provided your code . So try with both once

Upvotes: 1

Related Questions