CODEWITHSUNDEEP
htmlcss
Smokey Dawson
Smokey Dawson

Reputation: 9230

Ignore parent max-width css

I have a container on my website that keeps everything within a certain width like so..

HTML

<div class="container">
// content in here
</div>

CSS

.container{
   max-width: 1300px
}

now I have a div that I want to ignore the max-width and extend to the edges, but I don't want it to be positioned absolutely and taken out of the flow of the website so ive done this..

HTML

<div class="extend-past">
   // content here
</div>

CSS 

.extend-past{
   width: 100vw;
   height: 200px;
}

so this give me the correct width but its still following the max-width of the parent container and not starting from the left edge of the window, but the edge of the parent container now I can give it a negative margin but.. because the width of window changes the negative margin wont always be correct.. how can I get around this without making it an absolute element??

Thanks

Upvotes: 0

Views: 2429

Answers (1)

Randy
Randy

Reputation: 9819

Child elements are left-aligned by default.

-------------
|-----      |
-------------

What you could try instead is centering it:

-------------
|   -----   |
-------------

But if an element is too big, it will stick to the left:

-------------
|-----------|---------
-------------

What you can then do, is centering it from the left (margin-left: 50%):

-------------
|     ------|--------------
-------------

If you now transform the child element's X axis 50% to the left ( x - 50 ), you get this:

    --------------
----|------------|----
    --------------


.container {
  background-color: green;
  margin: 0 auto;
  max-width: 50%;
  padding: 10px;
}

.container > div {
  width: 80%;
  height: 50px;
  margin: 5px auto;
  background-color: red;
}

.container > div.overflow {
  width: 150%;
}

.solution .overflow {
  transform: translateX(-50%);
  margin-left: 50%;
}
<!-- Problem situation -->
Problem situation:
<div class="container">
  <div>
    Item 1
  </div>
  <div class="overflow">
  Item 2
  </div>
</div>

<!-- Solution -->
Solution:
<div class="container solution">
  <div>
    Item 1
  </div>
  <div class="overflow">
  Item 2
  </div>
</div>

Upvotes: 8

Related Questions