What I’m trying to do
I wrote some custom CSS to create callout boxes that float right. I would now like to create a dashboard environment that is extra wide (say 200%) and I can ![[embed#^1234]] a copy of my callouts into so they float left and I can scroll sideways to see 10-ish of them side by side.
Things I have tried
Originally I thought I would simply place the ![[embeded link]] into a custom div block, but that hasn’t been working as the Obsidian ![[embed]] seems to just ignore the div.
CSS:
.infodash {
width: 200%;
height: 100%;
overflow: scroll;
}
.infodash .markdown-embed {
float: left;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
Markdown:
![[infobox to embed]]
![[infobox to embed]]
![[infobox to embed]]
I tried the same thing by embedding inside of another callout, which worked, but created a staircase effect. with each embeded image slowly dropping by an additional line break (but they did float left!).
CSS:
/* Set Box Style*/
.callout[data-callout=“infodash”]{
width: 200%; /* Adjust the width of the callout box /
float: left; / Floats the callout box to the right /
margin-left: 10px; / Adds space between the callout box and the text OUTSIDE the box /
border: none;
padding: 0px; / Adds space between the dashboard and the text INSIDE the box */
/* Obsidian Custom Variables /
–callout-icon: lucide-info;
–callout-color: 126, 154, 170 0; / Sets color “theme” for box (header text and background) */
}
/* Removes border and padding for embedded files*/
.callout[data-callout=“infodash”] .markdown-embed,
.callout[data-callout=“infodash”] .file-embed{
float: left;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
Markdown:
>[!infodash]
> ![[infobox to embed]]
> ![[infobox to embed]]
> ![[infobox to embed]]