Question 227732 in CSS Question posted in
Some basic documentation can be found here.

Css – When applying postion fixed to sidebar the main div on the right is taking the whole screen width in react

I have 2 divs sidebar and main div, when postion fixed is appplied to sidebar the and main div is taking the whole screen width.I want to fixed sidebar and the main div to taking remaing width space for the div. Example if sidebar is taking 4% width then main div should take 96% width, but its taking 100%width

<div className="flex items-start">
      <aside className="bg-red-200 fixed h-[100vh]">
        <ul>
          <li> Home</li>
          <li> About</li>
          <li> About</li>
        </ul>
      </aside>
      <main className="overflow-y-auto">
        <Navbar />
        <Outlet />
      </main>
    </div>
    ```
Tags:

3

Answers


  1. 0

    When you apply position: fixed to an element, it’s taken out of the normal document flow (as if that element is never there). So the following elements will start taking place of the fixed element.

    Fix

    Login or Signup to reply.
  2. 0

    You can solve this by giving pl(padding left) utility class to main section.

    Demo – https://play.tailwindcss.com/JFDFRevhg2

    Login or Signup to reply.
  3. 0

    When you apply position fixed then The element is removed from the normal document flow, and no space is created for the element in the page layout.

    so if you want to keep the space of fixed element then minus the width of it from main div.

    .main{
  width:calc(100vw - 200px);
  /*note - 200px is width of sidebar*/
}
     <aside className="bg-red-200 fixed h-[100vh]">
        <ul>
          <li> Home</li>
          <li> About</li>
          <li> About</li>
        </ul>
      </aside>
      <main className="overflow-y-auto main">
        <Navbar />
        <Outlet />
      </main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search