Member Avatar for black3

It's a great way to change background colors site wide.

But it seems so horribly broken for what it's used for.

The tools given aren't particularly sane for page layout. One should be able to set up whatever constraints (equal, proportional, parallel, etc) as needed and the agent displaying the content finds a suitable solution. As an example, the login div must be equal width as the sidebar div, the sidebar div is at the left of the screen, the navbar is at the top of the screen and above the sidebar, and the content div is below the navbar and to the right of the sidebar. If everything is in a box, it would make sense to use other boxes as a reference point, rather than the screen. Tables are much more intuitive for layout purposes, but simply aren't capable enough. We can do what we need with CSS, but everything along the way is a messy hack.

Why would a spec for something that needs to be pixel-precise not come with an example implementation?

If the point is to separate content and presentation, then why must I change the content to get the effect I want?

  • 3 Contributors
  • 3 Replies
  • 612 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by cmills83

Dani AI

Generated

raised a common frustration and and touched on the usual trade-offs. The practical answer is: modern CSS gives explicit layout primitives so most "hacks" are avoidable. Instead of fighting floats and hoping widths match, declare the relationships you need (columns, rows, named areas) and let the browser resolve sizes and wrapping.

A compact Grid pattern that matches the layout described (navbar across the top, left sidebar, content to the right, and a login box that stays the same width as the sidebar) uses one shared variable for the sidebar width and Grid areas to express positioning:

:root { --sidebar-width: 240px; }

.container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "nav nav"
    "sidebar content";
  gap: 16px;
  min-height: 100vh;
}

.nav { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

.login { width: var(--sidebar-width); box-sizing: border-box; }

Notes and troubleshooting (practical, not theoretical): use box-sizing: border-box to avoid width surprises; prefer semantic elements (nav, aside, main) for accessibility; use min-width / max-width or minmax() to avoid collapse when content is large; align-items: stretch or Grid's auto row sizing gives equal-height columns without hacks; test with devtools layout overlays and temporarily add outlines to see flow. For legacy fallbacks, progressively enhance (start with a simple single-column flow and enable Grid/Flex at larger viewports). This addresses the constraint-style needs wanted while avoiding the semantic and accessibility problems that come from using tables for layout.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

CSS is not the problem. I use CSS with tables too. The REAL problem is that the div method of making columns falls apart if something won't fit in the allowed space. Usually this happens when the browser window changes size.

It is not a terrible event if you use a table, especially if you must have the parts render in the same relationship to each other. Table is not deprecated. It will force a horizontal scrollbar if stuff doesn't fit, instead of falling apart.

The REAL problem with using tables for layout is that it isn't politically correct. It won't render correctly on devices intended to audibly read a website for the blind. At the beginning of each cell, it inserts verbal text similar to "Table row 3, column 1" into the audible rendering.

The REAL problem with the div method is that there is no equivalent to the tr tag to force stuff to stay in rows. There is also no equivalent to rowspan.

So I suggest that you try to get divs to render what you want. If they don't work, use a table anyway. It will still validate.

What is NOT proper usage is using tables to define page margins. Before CSS margins existed, page authors used table to put margins around the page.

Member Avatar for cmills83

CSS isnt a problem if you know what youre doing. IMO easier than tables.

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.