Переместить элемент в правое поле без удаления из потока HTML с помощью CSS

Question

У меня есть столбец фиксированной ширины по центру страницы. Так как область просмотра варьируется, поле неизвестно. Я хотел бы переместить его к левому краю экрана, не удаляя его из потока HTML.

<main class="centered" style="width:750px;margin-left:auto;margin-right:auto">
...
  <figure class="imagefullwidth" style="width:100vw">
    <img src="image.jpg">
  </figure>
...
</main>

Это должно выглядеть примерно так:

       _______main_______
      |                 |
      |                 |
 _____|______figure_____|_____     
|                             |
|                             |     
|                             |     
|_____________________________|     
      |                 |
      |                 |
      |                 |
      |_________________|

Конечно, я пыталсяposition: absolute; left: 0 на <figure>, но это вывело его из потока HTML. Я попытался position: absolute; на изображении, и хотя я могу создать изображение большего размера, чем его контейнер, left:0 помещает изображение только по левому краю <main> (плюс это позволило <figure> свернуться до высоты 0, и яне знаю высоту изображения, чтобы придать ему высоту).

Отрицательные поля не помогают, потому что я не знаю ширину поля при любой конкретной ширине области просмотра. float: left не работает, потому что он плавает в своем контейнере.

Я не могу изменить HTML, потому что он исходит от CMS. Но есть много обёрток и вещей, которые я могу стилизовать.

Можете ли вы придумать способ сделать это с помощью чистого CSS, без JS?

Answer 1

На основании html и визуального примера, представленного ниже, css, кажется, выполняет то, что вам нужно. Пример JSFiddle

.centered {
  background-color: gray;
  width: 100% !important;
  max-width: 750px;
}

.imagefullwidth {
  width: initial !important;
}

.imagefullwidth img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto !important;
}

Answer 2

Я не знаю, почему вы хотите это сделать, но если вы хотите переместить столбец влево, вы можете сделать что-то подобное.

<main class="centered" style="width:750px;margin-left:0;margin-right:auto">

  <div class="imagefullwidth" style="width:100vw">
    <img src="image.jpg">
  </div>

</main>

здесь вы вносите изменения в первой строке.

 <main class="centered" style="width:750px;margin-left:0;margin-right:auto">

где оставленное поле равно 0, чтобы он мог переместить столбец на левый сайт. потому что, имея поле авто, он пытается выровнять по центру.

как вы сказали, этот код взят из CMS. Вполне возможно, что это не сработает, поскольку существует файл CSS, который переопределяет это свойство.