Search code examples
htmlcsslayouttailwind-css

How to center content with a sidebar without overlapping

I'm working on a general page layout using Tailwind CSS where the content (think blog) is centered in the middle of the screen (with a pre-set max-width) and a sidebar outside the content, sticky to the side of the screen.

The issue I'm facing is that when resizing the page for different viewports, the main content EITHER overlaps with the Sidebar or is not centered relative to the entire screen width.

Example where content is properly centered, but overlaps with the sidebar on resize - https://play.tailwindcss.com/f86lLdkXwM

<div class="flex min-h-screen flex-col">
    <!-- Sidebar. Should be sticky to the left side of the screen. Visible only on large+ screen sizes -->
    <aside class="fixed left-0 top-0 hidden h-full w-[300px] overflow-y-auto border-r py-[70px] lg:block">
        <div class="px-2 py-12">
            <h1>Sidebar content</h1>
        </div>
    </aside>

    <!-- Main content of the webpage. Max width is 800px, centered relatives to full page width -->
    <main class="flex grow justify-center">
        <div class="flex min-h-full w-full max-w-[800px] flex-col p-12">
            <header>header</header>
            <section class="mt-20 grow">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, autem eaque. Corporis soluta qui pariatur fuga laboriosam natus perferendis atque recusandae iste, praesentium ex quas ipsam deleniti tempora esse repudiandae?</p>
            </section>
            <div>Footer</div>
        </div>
    </main>
</div>

enter image description here

If I add xl:ml-[300px] (size of the sidebar) to the main element, the overlap issue is fixed. However, this causes the main content to not be centered relative to the entire screen width. Instead, it is centered relative to the total width minus the 300px from the sidebar, making it off-center. Reproduction: https://play.tailwindcss.com/92EMDRfvps

In the video below there's a text "Center starts here" that indicates where actually the content should begin

enter image description here

What I'm Looking For:

A solution to prevent the main content from overlapping with the Sidebar when resizing the page while keeping the main content centered relative to the entire screen width.

Is there any way to achieve this with html and tailwind?

Solution

  • You could adjust your second solution to add 300px to right side so that it is offset the same amount both sides, thus centered:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="flex min-h-screen flex-col">
  <aside class="fixed left-0 top-0 hidden h-full w-[300px] overflow-y-auto border-r py-[70px] lg:block">
    <div class="px-2 py-12">
      <h1>Sidebar content</h1>
    </div>
  </aside>

  <main class="flex grow justify-center lg:mx-[300px]">
    <div class="flex min-h-full w-full max-w-[800px] flex-col p-12">
      <header>header</header>
      <section class="mt-20 grow">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, autem eaque. Corporis soluta qui pariatur fuga laboriosam natus perferendis atque recusandae iste, praesentium ex quas ipsam deleniti tempora esse repudiandae?</p>
      </section>
      <div>Footer</div>
    </div>
  </main>
</div>

    However, at between 1024px to around 1280px viewport size, the content seems uncomfortably thin. So you could consider allowing the content to be off-center within this range so that it has more horizontal space. Then center it for viewports 1280px and higher:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="flex min-h-screen flex-col">
  <aside class="fixed left-0 top-0 hidden h-full w-[300px] overflow-y-auto border-r py-[70px] lg:block">
    <div class="px-2 py-12">
      <h1>Sidebar content</h1>
    </div>
  </aside>

  <main class="flex grow justify-center lg:ml-[300px] xl:mr-[300px]">
    <div class="flex min-h-full w-full max-w-[800px] flex-col p-12">
      <header>header</header>
      <section class="mt-20 grow">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, autem eaque. Corporis soluta qui pariatur fuga laboriosam natus perferendis atque recusandae iste, praesentium ex quas ipsam deleniti tempora esse repudiandae?</p>
      </section>
      <div>Footer</div>
    </div>
  </main>
</div>

    Or increasing the criteria of the sidebar showing to 1280px viewport or higher:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="flex min-h-screen flex-col">
  <aside class="fixed left-0 top-0 hidden h-full w-[300px] overflow-y-auto border-r py-[70px] xl:block">
    <div class="px-2 py-12">
      <h1>Sidebar content</h1>
    </div>
  </aside>

  <main class="flex grow justify-center xl:mr-[300px]">
    <div class="flex min-h-full w-full max-w-[800px] flex-col p-12">
      <header>header</header>
      <section class="mt-20 grow">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, autem eaque. Corporis soluta qui pariatur fuga laboriosam natus perferendis atque recusandae iste, praesentium ex quas ipsam deleniti tempora esse repudiandae?</p>
      </section>
      <div>Footer</div>
    </div>
  </main>
</div>