I'm creating a document for print using HTML and CSS, and I'm going to export it to PDF. It's a two-column layout, and I want to add a sidebar that's aligned to the top right. The document is several pages long, and there could be other sidebars as well on later pages. There's a simplified version of the markup below. It's not working - is it possible?
<article>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa esse ad vitae minus unde commodi ullam non cupiditate quibusdam dignissimos laborum laboriosam asperiores sit eius itaque nostrum dolorum, nesciunt saepe?</div>
<aside>This is a sidebar. I want to be floated on the right-hand side, with main text flowing around me. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque doloremque blanditiis, suscipit quibusdam inventore neque magnam ducimus commodi aliquam debitis nisi voluptatem sint provident tempore.</aside>
<div>Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati recusandae aspernatur cupiditate dignissimos, quod inventore expedita doloribus sunt velit illo suscipit ipsum. Modi at cum nam fugit architecto, quisquam enim placeat magnam nemo eveniet saepe quos expedita aliquam praesentium molestias eaque qui amet, magni. Est illum amet tenetur cumque a omnis nisi ad saepe unde labore similique rem officiis eum, beatae, sit voluptates magnam ratione totam, vitae.</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia natus qui veritatis ullam cum dolor laudantium, animi ratione fugiat atque cupiditate, pariatur deleniti sit reiciendis saepe odio modi unde! Doloremque.</div>
</article>
article {
columns: 2;
}
aside {
background-color: #ccc;
float: right;
width: 100%;
}
Change your width of your aside to something like 30% instead of 100%.
article {
columns: 2;
}
aside {
background-color: #ccc;
float: right;
width: 30%;
padding: 5px;
margin: 0 0 0.5em 1em;
break-inside: avoid;
}
article>*:first-child {
margin-top: 0;
}<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
</p>
<aside>
This is a sidebar, which I want to be floated on the right-hand side, with main text flowing around me.
</aside>
<p>
Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
</p>
</article>