Picture and text side by side on quarto

[Tony_Duan]

Hi,

1.May I ask how to put Picture and text side by side on quarto?
for example:

2.How to control the width of the quarto page ?,I want to use the full width of the page.
for example , the empty space on the left and right:

Thank you

[gsapijaszko]

You can wrap picture and text with <div></div> tags, like:

<div>
    <div style="float: left; position: relative; top: 0px; padding: 30px;">
    ![](image.jpg)
    </div>

Some text, some text, some text, some text, some text, [...] some text, some text
</div>

To extend the width of body, have a look on bootstrap.css, and modify your style.css with something simillar:

@media {
  body.fullcontent:not(.floating):not(.docked) .page-columns {
    display:grid;
    gap:0;
    grid-template-columns:[screen-start] 1.5em [screen-start-inset] 5fr [page-start page-start-inset] 35px [body-start-outset] 35px [body-start] 1.5em [body-content-start] minmax(500px, calc(1850px - 3em)) [body-content-end] 1.5em [body-end] 35px [body-end-outset] 35px [page-end-inset page-end] 5fr [screen-end-inset] 1.5em [screen-end]
   }
}

Where [body-content-start] minmax(500px, calc(1850px - 3em)) defines the width of the main column.

Regards,
Grzegorz

[HanOostdijk]

In addition to the answer by @gsapijaszko also see https://quarto.org/docs/authoring/article-layout.html

[cteague]

I want to use the full width of the page.
for example , the empty space on the left and right:

There is a page layout option (page-layout: full) that should do just what you're looking for!

Quarto - Page Layout

[Tony_Duan]

Thanks @cteague @HanOostdijk @gsapijaszko .

1.May I ask how to put Picture and text side by side on quarto?
I use column grid to fix this problem

Quarto - Page Layout

2.How to control the width of the quarto page ?,I want to use the full width of the page.
I put below code on the top to fix page as full width