I'm aiming to set up a customized header that changes for each page of my bookdown gitbook output to match organizational branding.
Aligned to the left I need the bolded title and below it a single line of smaller descriptive text. I have this working, however now I'm trying to get a small piece of text and logo to float to the right on the same line.
I don't have the ability to share the source code.
My initial attempt was to use fenced divs to make two columns and place the pieces in each column. This had immediate side effects of throwing off formatting in the rest of the document, removing the chapter titles from the index bar, and causing some weird assignment of the .page-inner class which I wasn't sure what the downstream ramifications of would be.
::::: {style="display:flex;"}
::: {.column width="70%"}
# Community Profile: CLHA `r clha_num` `r current_clha`{-}
This profile describes the population within the **Consolidated Local Health Area of `r clha_num` `r current_clha`.**
:::
::: {.column width="30%"}
**Protected A**
``{r echo=FALSE, class.source='hsiarlogo'}
knitr::include_graphics("./image/HSIAR-logo.png")
``
:::
::::
So I've tried to pivot by using <div> and css to try and target them, but I don't really know what I'm doing
<div class = "full-header">
<div class = "main-header">
# Community Profile: CLHA `r clha_num` `r current_clha`{-}
This profile describes the population within the **Consolidated Local Health Area of `r clha_num` `r current_clha`.**
</div>
<div class = "header-side-piece">
Protected A
</div>
<div class = "header-logo">
{width="10%"}
</div>
</div>
.full-header {
display: block;
}
.main-header {
float:left;
}
.header-side-piece {
float: right;
text-align: right;
font-family: 'BCSans-Bold';
font-weight: bold;
}
Any guidance on whether one of these avenues has a better chance of success would be great, or alternative ideas of how to do what I need to do.
