6 replies

basic help on structure of a simple website

I'm very new to front-end development, especially CSS. I want to create a website with a top navigation bar and a side navigation bar on the right side of the page. The top and side navigation bars should be fixed, and the main content area between the navigation bars should not overflow. If possible, I would like the height of the top navigation bar to be 15% of the height of the window and the width of the sidebar to be 15% of the width of the window, even when the user minimizes the window.

I tried to achieve this behavior with the following structure:

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

I also tried putting the main content and the sidebar in one div. I used both flex and grid displays, but nothing worked the way I imagined it.
I would really appreciate it if someone could help me with this issue. Thank you!

basic help on structure of a simple website

Similar Threads

Similar Threads

Similar Threads