← Back to Guide

Layout & Container Elements

Five classes for grouping and structuring page content. Div is the workhorse generic container. Header, Footer, and Nav are semantic equivalents — same behavior, different HTML tag. Panel handles flex-based layouts and has its own dedicated guide page.

Quick Decision: Which Container?

• Generic wrapper, applying a CSS class or grouping unrelated children → Div
• Page header with logo / title → Header
• Page footer with copyright / contact → Footer
• Navigation menu → Nav
• Flex-based layout (rows, columns, percentages, scrolling, cards) → Panel (see dedicated guide)

Div

The generic container. Renders as <div>. Use it for grouping children that share a CSS class, attaching inline styles, or any case where you need a block element without semantic meaning.

// Plain div with a class
content.Add(new Div("card")).Add(new P("Card content"));

// Fluent builders
content.Add(new Div()
    .WithClass("highlight-box")
    .WithId("warning-area")
    .WithStyle(s => s.Background("#fff3cd").Padding("10px"))
    .WithText("Inline text content"));

// Wrapper for child elements
var wrapper = content.Add(new Div("section"));
wrapper.Add(new H3("Section Title"));
wrapper.Add(new P("Section body"));

Div: Closing Comments

Div optionally renders an HTML comment after its closing tag, helpful when reading deeply-nested generated HTML in browser DevTools. WithComment sets it explicitly; otherwise the CSS class is used as the comment automatically.

content.Add(new Div("dashboard-grid"));
// renders:  </div> <!-- dashboard-grid -->

content.Add(new Div().WithComment("end of filter section"));
// renders:  </div> <!-- end of filter section -->

Header

Renders as <header>. Use it for the visible header band at the top of a page (logo, page title, app name). The Guide app's own header — "✈️ FlightPlan Developer Guide" at the top of every page — is a Header instance built in GuideBasePage.CreateDocument().

// In your CreateDocument():
var header = doc.Add(new Header("guide-header"));
header.Add(new H1("✈️ FlightPlan Developer Guide"));

Footer

Renders as <footer>. Counterpart to Header — the band at the bottom for copyright, contact links, version info. Same fluent API.

var footer = doc.Add(new Footer("guide-footer"));
footer.Add(new P("FlightPlan Framework - Copyright © 2025-2026 by Ted Lowery"));

Nav

Renders as <nav>. Wrap navigation menus in this rather than a Div — screen readers and accessibility tools recognize <nav> as a navigation landmark.

var nav = header.Add(new Nav("main-nav"));
nav.Add(new A("/",        "Home"));
nav.Add(new A("/Reports", "Reports"));
nav.Add(new A("/Admin",   "Admin"));

Div vs Panel: When to Use Which

Both produce a <div>, but they're for different jobs. The rule of thumb:

• Use Div for grouping content under a CSS class, applying inline styles, or wrapping a section of text — anywhere the layout doesn't matter.
• Use Panel when you need flex layout — sizing children proportionally, filling the viewport, scrolling regions. Wrapping a chart in a plain Div breaks the flex chain (see the Panel guide's "Golden Rule" section).

Short version: if you're just grouping, use Div. If you're laying out, use Panel.

← Back to Guide