Unable to float div in tailwind CSS

Question

I want my sidebar to be on the righthand side of the screen and it's stuck on the left.

Parent

      <div className="relative w-full min-h-screen h-full bg-primary-color-light dark:bg-primary-color-dark ">
        <SlideNav toggleSidebar={setToggleSidebar} sideOpen={toggleSidebar} />
      </div>

Sidebar

    <div className={`absolute h-full top-16 ease-in-out duration-200 float-right mr-0 ${!sideOpen && "-mr-96"} w-72 bg-white dark:bg-secondary-color-dark shadow dark:text-white select-none`}>
      <div className="flex flex-col align-center text-sm ">
        <div className="border-y dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatUnread className="mt-1 text-lg" /><span>Reading Queue</span></div>
        <div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><BsTags className="text-xl" /><span>Create Category</span></div>
        <div className="border-b dark:border-primary-color-dark py-5 px-5 flex items-center group hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiHeart className="text-2xl group-hover:text-red-600" /><span>Favorites</span></div>
        <div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatRead className="text-lg" /><span>Read</span></div>
        <div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiSettings className="text-xl" /><span>Settings</span></div>
        <div onClick={() => ToggleTheme()} className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiCloudMoon className="text-xl" /><span>Toggle Theme</span></div>
      </div>
      <div className="py-3 border-t dark:border-primary-color-dark flex bottom-0 items-center dark:hover:bg-hover-color-dark hover:bg-slate-100 hover:cursor-pointer justify-center"><div className="flex items-center space-x-3 text-sm"><RiLogoutBoxLine /><span>Logout</span></div></div>
    </div>

Why is this the case if the parent is set to relative?

Please create a [Minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — ATP, Dec 10 '22 at 19:00
But if I understand correctly, Make the sidebar direct child of body. — ATP, Dec 10 '22 at 19:02
Does this answer your question? [Float right and position absolute doesn't work together](https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together) — Yilmaz, Dec 10 '22 at 23:51

score 0 · Answer 1 · answered Jan 03 '23 at 05:32

Use absolute inset-y-0 right-0 to position to the right of the screen

Code:

<div class=" h-screen relative z-0 flex bg-gray-500 ">
 <div class="text-4xl "> The main content of the file and it has it's content all over the page and i want to build a navbar on top of this</div>
  <div class="absolute inset-y-0 right-0 z-10 bg-green-400 w-1/3 "><div class="flex h-full items-center justify-center text-4xl">Mobile Navbar</div></div>
</div>

Unable to float div in tailwind CSS

Parent

Sidebar

1 Answers1

Code:

Output:

Code link: Tailwind play