Maico Williams Maico Williams - 1 month ago 17
CSS Question

How to ignore parent's width limit in CSS

An example of my code:

https://jsfiddle.net/b5woxesg/


Explaining:

My website's content was placed like this to keep itself in the center of the page. With
width:
in % and
max-width:
in px to not strech.
This content is called from a Markdown file, since I am using jekyll.

What I want to do is: whenever I call the
{% highlight %}
in the MD file, the code block the is generated should be with
width: 100%
but ignoring the parent's width limit. I mean 100% of the whole page. Also, the text inside should keep in alignment with the page content. Something like that:

enter image description here

But the highlight div is inside the content with blue border.

I believe that there's no way to do this without changing the current structure, I have no problem with that, but since i'm using a MD file, some changes can be restricted.

Answer
[Live Link][1]

Yes it's possible only change by css. By few change :

  1. just make position: absolute;to relative on class .page.

  2. and add css in .highlight class

    position: absolute; left: 0;

solve it if you need anything more just make a comment.