Member Avatar for beforetheyknew

What css do i use to set up the standard 5 box website? i forget its formal name, whats it called? The website layout, with a header, footer, centred centre page and the a right and left side.

  • 4 Contributors
  • 5 Replies
  • 118 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

The layout you described (header, left, centre, right, footer) is the classic three-column-with-header-and-footer pattern — sometimes called the "Holy Grail". asked for the CSS; and pointed to older float-based tutorials and frameworks, and showed the traditional float/wrapper approach. Those float techniques still work, but modern CSS (Grid/Flexbox) gives a simpler, more reliable solution with less hackery and better responsive behavior.

Use semantic HTML5 (header, main, aside, footer), constrain the page with a centered max-width, and let CSS Grid handle placement and equal heights. Grid keeps layout logic in CSS so the DOM order can stay semantic for accessibility. If legacy browser support is required, provide a Flexbox or float fallback (or use a build tool that autoprefixes for you).

Here is a compact Grid example to implement a centered header, footer, two sidebars and a main content area. It stacks into a single column on narrow screens:

<div class="layout">
  <header>Header</header>
  <aside class="left">Left sidebar</aside>
  <main>Main content</main>
  <aside class="right">Right sidebar</aside>
  <footer>Footer</footer>
</div>

<style>
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}
header { grid-area: header; }
aside.left { grid-area: left; }
main { grid-area: main; }
aside.right { grid-area: right; }
footer { grid-area: footer; }

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "left"
      "right"
      "footer";
  }
}
</style>

Notes: test keyboard/tab order and screen-reader reading order (keep main early in the DOM if you want it prioritized), add box-sizing: border-box, and use sensible breakpoints. For learning references see the MDN CSS Grid documentation and the CSS-Tricks Complete Guide to Grid.

Recommended Answers

All 5 Replies

Member Avatar for Frankey

i would go for framework! They got nice templates and you can be sure it is all validated.

Member Avatar for drjohn

In my opinion this is the best reference:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

That's one overly complicated way to get a simple three col layout!!!

<div id=wrapper>
<div id=header>
</div>
<div id=left>
</div>
<div id=content>
</div>
<div id=right>
</div>
<div id=footer>
</div>
</div>

That's how the rest of the world does it. With left, content and right all floated left. body has margin 0 and padding 0. Wrapper is given padding 0 and usually margin 0 auto. Width for header and footer usually the same as wrapper, and they both have margin 0 and padding 0.

Job done.

PS Formal name? ? ?

Edited by drjohn because: n/a
Member Avatar for beforetheyknew

Aww thanks man, formal name, i just meant are lecturer referred to the website with a header, left, centre, right, and footer as something. Doesn't matter. Thanks guys.

Member Avatar for drjohn

Perhaps the lecturer said standard three column layout

It's not an official name or anything, just something many people call it.

There's also the joke name of "Holy Grail" layout

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.