Sidebar with main content in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the visual layout of this Tailwind sidebar and main content code?

Given the following Tailwind CSS code, what will the user see in the browser?

Tailwind

<div class="flex h-screen">
  <aside class="w-64 bg-gray-800 text-white p-4">Sidebar</aside>
  <main class="flex-1 p-6">Main Content</main>
</div>

A Sidebar hidden and main content fills the entire screen.

B A horizontal top bar with dark background and white text, and the main content below it filling the screen.

C Two stacked sections: sidebar on top with dark background, main content below with white background.

D A vertical sidebar on the left with dark background and white text, and the main content area filling the rest of the screen to the right.

💡 Hint

Think about how the flex container arranges its children by default.

The 'flex' class creates a horizontal layout by default. The sidebar has a fixed width of 16rem (w-64), and the main content uses flex-1 to fill the remaining space. So the sidebar appears on the left and main content on the right.

❓ accessibility

intermediate

Which ARIA role should be added to the sidebar for better accessibility?

You have a sidebar navigation area in your layout. Which ARIA role is best to add to the

element to help screen readers understand its purpose?

Tailwind

<aside class="w-64 bg-gray-800 text-white p-4">Sidebar</aside>

A role="banner"

B role="main"

C role="navigation"

D role="contentinfo"

💡 Hint

Think about what the sidebar usually contains.

Sidebars often contain navigation links, so using role="navigation" helps assistive technologies identify it as a navigation landmark.

❓ selector

advanced

Which Tailwind class combination correctly makes the sidebar fixed and scrollable independently?

You want the sidebar to stay fixed on the left side and be scrollable if content overflows, while the main content scrolls separately. Which option achieves this?

A sidebar: "fixed top-0 left-0 h-full w-64 overflow-y-auto", main: "ml-64 p-6"

B sidebar: "sticky top-0 w-64 h-full overflow-x-auto", main: "ml-64 p-6"

C sidebar: "relative w-64 h-screen overflow-y-scroll", main: "flex-1 p-6"

D sidebar: "absolute top-0 left-0 h-full w-64 overflow-hidden", main: "ml-64 p-6 overflow-y-auto"

💡 Hint

Fixed position keeps the sidebar visible while scrolling the main content.

Using 'fixed' with 'top-0 left-0 h-full w-64' pins the sidebar to the left full height. 'overflow-y-auto' allows vertical scrolling inside the sidebar if needed. The main content is pushed right with 'ml-64'.

📝 Syntax

advanced

What error occurs with this Tailwind layout code?

Consider this HTML snippet using Tailwind classes. What error or problem will happen when rendered?

Tailwind

<div class="flex">
  <aside class="w-64 bg-gray-800 text-white p-4">Sidebar</aside>
  <main class="w-full p-6">Main Content</main>
</div>

A Sidebar is hidden because w-64 is invalid.

B The main content overflows horizontally because w-full ignores the sidebar width.

C The layout stacks vertically instead of side by side.

D No error; layout works perfectly.

💡 Hint

Think about how width classes behave inside a flex container.

In a flex container, 'w-full' on main tries to take 100% width of the container, ignoring the sidebar's width, causing horizontal overflow and a scrollbar.

🧠 Conceptual

expert

How does using CSS Grid improve sidebar and main content layout over Flexbox in Tailwind?

Which statement best explains the advantage of using CSS Grid for a sidebar and main content layout compared to Flexbox?

A CSS Grid allows defining both rows and columns explicitly, making complex layouts easier, while Flexbox is mainly one-dimensional.

B Flexbox supports fixed sidebar widths better than CSS Grid, which only works with flexible widths.

C CSS Grid automatically makes the sidebar responsive without media queries, Flexbox does not.

D Flexbox is better for two-dimensional layouts, CSS Grid only works for single row layouts.

💡 Hint

Think about layout directions and control over rows and columns.

CSS Grid is designed for two-dimensional layouts, letting you control rows and columns explicitly. Flexbox is one-dimensional, either row or column, so complex grid-like layouts are easier with CSS Grid.

Practice

1. What is the main purpose of a sidebar in a web layout using Tailwind CSS?

easy

A. To replace the main content entirely

B. To add decorative images only

C. To organize navigation or extra information beside the main content

D. To hide content on all screen sizes

Solution

1. Step 1: Understand sidebar role

   A sidebar is typically used to hold navigation links or extra info next to main content.

2. Step 2: Compare options

   Only To organize navigation or extra information beside the main content correctly describes this purpose; others are incorrect uses of sidebars.

3. Final Answer:

   To organize navigation or extra information beside the main content -> Option C

4. Quick Check:

   Sidebar purpose = organize navigation/info [OK]

Hint: Sidebars hold extra info beside main content [OK]

Common Mistakes:

• Thinking sidebar replaces main content
• Using sidebar only for decoration
• Assuming sidebar hides content always

2. Which Tailwind CSS class combination correctly creates a horizontal layout with a sidebar and main content side by side?

easy

A. inline-block

B. block flex-col

C. grid grid-cols-1

D. flex flex-row

Solution

1. Step 1: Identify layout direction classes

   Tailwind's flex with flex-row arranges children horizontally side by side.

2. Step 2: Evaluate other options

   block flex-col stacks vertically, grid-cols-1 creates one column, and inline-block does not create a flex layout.

3. Final Answer:

   <code>flex flex-row</code> -> Option D

4. Quick Check:

   Horizontal layout = flex flex-row [OK]

Hint: Use flex with flex-row for horizontal side-by-side layout [OK]

Common Mistakes:

• Using flex-col for horizontal layout
• Using grid-cols-1 for two columns
• Using inline-block for layout

3. Given this Tailwind HTML snippet, what will be the width of the sidebar on a large screen?

<div class="flex">
  <aside class="w-1/4 bg-gray-200">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. 25% of the container width

B. 50% of the container width

C. 75% of the container width

D. 100% of the container width

Solution

1. Step 1: Understand width classes

   w-1/4 means the element takes one quarter (25%) of the container width.

2. Step 2: Confirm layout with flex

   Since the parent uses flex, the sidebar and main content sit side by side with widths 25% and 75% respectively.

3. Final Answer:

   25% of the container width -> Option A

4. Quick Check:

   w-1/4 = 25% width [OK]

Hint: w-1/4 means 25% width in Tailwind [OK]

Common Mistakes:

• Confusing w-1/4 with 1/2 or 75%
• Ignoring flex layout effect
• Assuming fixed pixel width

4. Identify the error in this Tailwind layout code for a sidebar and main content:

<div class="flex flex-col">
  <aside class="w-1/4 bg-blue-100">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. Missing background color on main content

B. Using flex-col stacks sidebar and main vertically, not side by side

C. w-1/4 and w-3/4 widths are invalid classes

D. flex class should be replaced with grid

Solution

1. Step 1: Analyze flex direction

   flex-col stacks children vertically, so sidebar and main appear one above the other.

2. Step 2: Check width classes and layout goal

   Widths w-1/4 and w-3/4 are valid but ignored in vertical stacking; to place side by side, flex-row is needed.

3. Final Answer:

   Using flex-col stacks sidebar and main vertically, not side by side -> Option B

4. Quick Check:

   flex-col stacks vertically, not side by side [OK]

Hint: Use flex-row for horizontal sidebar layout, not flex-col [OK]

Common Mistakes:

• Confusing flex-col with flex-row
• Thinking widths apply in vertical flex
• Ignoring layout direction effect

5. You want a sidebar that is hidden on small screens but visible on medium and larger screens, with main content filling the rest. Which Tailwind classes achieve this layout?

<div class="flex">
  <aside class="??? bg-gray-300">Sidebar</aside>
  <main class="??? p-4">Main Content</main>
</div>

hard

A. hidden md:block w-1/4 for aside and w-full md:w-3/4 for main

B. block w-1/4 for aside and w-3/4 for main

C. hidden w-1/4 for aside and w-full for main

D. md:hidden w-1/4 for aside and w-full md:w-3/4 for main

Solution

1. Step 1: Hide sidebar on small, show on medium+

   Use hidden md:block on aside to hide it on small screens and show from medium screens up.

2. Step 2: Set widths for responsive layout

   Sidebar gets w-1/4 on medium+ screens; main uses w-full on small and md:w-3/4 on medium+ to fill remaining space.

3. Final Answer:

   hidden md:block w-1/4 for aside and w-full md:w-3/4 for main -> Option A

4. Quick Check:

   Responsive show/hide + widths = hidden md:block w-1/4 for aside and w-full md:w-3/4 for main [OK]

Hint: Use hidden md:block and responsive widths for sidebar [OK]

Common Mistakes:

• Not hiding sidebar on small screens
• Using md:hidden instead of hidden md:block
• Not adjusting main content width responsively