I have a column of fixed width centered on the page. Since the viewport varies, the margin is unknown. I would like to move it to the left edge of the screen without removing it from the HTML flow.
<main class="centered" style="width:750px;margin-left:auto;margin-right:auto">
...
<figure class="imagefullwidth" style="width:100vw">
<img src="image.jpg">
</figure>
...
</main>
That should look something like:
_______main_______
| |
| |
_____|______figure_____|_____
| |
| |
| |
|_____________________________|
| |
| |
| |
|_________________|
Of course, I tried position: absolute; left: 0 on <figure> but that took it out of the HTML flow. I tried position: absolute; on the image and though I can create a larger image than its container, left:0 only puts the image at the left edge of the <main> (plus that allowed <figure> to collapse to height 0 and I don't know the height of the image to give it a height).
Negative margins don't help because I don't know the width of the margin at any particular viewport width. float: left doesn't work because it floats within its container.
I can't modify the HTML because it comes from a CMS. But there are lots of wrappers and stuff I can style.
Can you think of a way to do this with pure CSS, without JS?
