diff --git a/src/Layout.jl b/src/Layout.jl
index 26bffd70..d9ac82ab 100644
--- a/src/Layout.jl
+++ b/src/Layout.jl
@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.12
+# v0.20.20
 
 using Markdown
 using InteractiveUtils
@@ -20,6 +20,9 @@ using HypertextLiteral
 # ╔═╡ a1c603fc-2c9e-47bd-9c51-b25f7104deb5
 using Hyperscript
 
+# ╔═╡ 444c9dc3-944c-4794-b4a8-827430c5b21e
+using UUIDs
+
 # ╔═╡ b1e7e95f-d6af-47e5-b6d4-1252804331d9
 md"""
 # Grid
@@ -434,6 +437,57 @@ function aside(x)
 		""")
 end
 
+# ╔═╡ bb2d8230-ec07-4c61-9013-b0261e612541
+floatasidetxt=md"""
+`floataside(stuff; top=1 )` allows to place material on the right pane such that it is always visible, very much like with `TableOfContents(aside=true)`.
+There are two interesting patterns how this can be used:
+- Put interactive material into the main pane and show the results in a floating aside box
+- Have interactive control (PlutoUI widgets) in the floating aside box and show the results in the main pane	
+"""
+
+# ╔═╡ cc4244b7-a91b-485b-9593-c654066e3bb8
+begin
+	function floataside(text::Markdown.MD; top = 1)
+        uuid = uuid1()
+        @htl("""
+       		<style>
+       		@media (min-width: calc(700px + 30px + 300px)) {
+       			aside.plutoui-aside-wrapper-$(uuid) {
+			       	color: var(--pluto-output-color);
+       				position:fixed;
+       				right: 1rem;
+       				top: $(top)px;
+       				width: 400px;
+       				padding: 10px;
+       				border: 3px solid rgba(0, 0, 0, 0.15);
+       				border-radius: 10px;
+       				box-shadow: 0 0 11px 0px #00000010;
+       				/* That is, viewport minus top minus Live Docs */
+       				max-height: calc(100vh - 5rem - 56px);
+       				overflow: auto;
+       				z-index: 40;
+       				background-color: var(--main-bg-color);
+       				transition: transform 300ms cubic-bezier(0.18, 0.89, 0.45, 1.12);
+					}
+       			aside.plutoui-aside-wrapper > div {}
+       		}
+       		</style>
+       		<aside class="plutoui-aside-wrapper-$(uuid)">
+       		<div>
+       		$(text)
+       		</div>
+       		</aside>
+       		""")
+    end
+    floataside(stuff; kwargs...) = floataside(md"""$(stuff)"""; kwargs...)
+end
+
+# ╔═╡ 636c641b-2de5-49ad-b2a8-e5ba38c325e4
+md"""
+# FloatAside
+$(floataside(floatasidetxt, top=150))
+"""
+
 # ╔═╡ 9a166646-75c2-4711-9fad-665b01731759
 # ╠═╡ skip_as_script = true
 #=╠═╡
@@ -571,10 +625,16 @@ end
 aside(embed_display(p))
   ╠═╡ =#
 
+# ╔═╡ e06f3b17-a831-469d-905a-57a2a929a063
+#=╠═╡
+floataside(embed_display(p), top=420)
+  ╠═╡ =#
+
 # ╔═╡ Cell order:
 # ╠═9113b5a3-d1a6-4594-bb84-33f9ae56c9e5
 # ╠═dd45b118-7a4d-45b3-8961-0c4fb337841b
 # ╠═a1c603fc-2c9e-47bd-9c51-b25f7104deb5
+# ╠═444c9dc3-944c-4794-b4a8-827430c5b21e
 # ╟─b1e7e95f-d6af-47e5-b6d4-1252804331d9
 # ╠═306ee9a7-152f-4c4a-867d-a4303f4ddd6c
 # ╠═574ef2ab-6438-49f5-ba63-12e0b4f69c7a
@@ -629,6 +689,10 @@ aside(embed_display(p))
 # ╟─916f95ff-f568-48cc-91c3-ef2d2c9e397a
 # ╠═d24dfd97-5100-45f4-be12-ad30f98cc519
 # ╠═18cc9fbe-a37a-11eb-082b-e99673bd677d
+# ╠═636c641b-2de5-49ad-b2a8-e5ba38c325e4
+# ╟─bb2d8230-ec07-4c61-9013-b0261e612541
+# ╠═e06f3b17-a831-469d-905a-57a2a929a063
+# ╠═cc4244b7-a91b-485b-9593-c654066e3bb8
 # ╠═9a166646-75c2-4711-9fad-665b01731759
 # ╠═d373edd9-5537-4f15-8c36-31aebc2569b5
 # ╟─50c3dce4-48c7-46b4-80a4-5af9cd83a0a8