Member Avatar for Stefano Mtangoo

Hello there!
I'm building a site that wil need three columns. I have found it easier with Tables and I love to do it with CSS tabless layout. I get stuck when Left and right columns are unequal in height and mispositioned.

I want a site with 200px side bars and then the rest be middle place to contain information and postings. I need header and footer! Also one row after header for hot issues! I have googled here and there No help! what I have found is using javascript which I don't want to envolve in.
Help is highly appreciated.

Steve

  • 2 Contributors
  • 2 Replies
  • 88 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Stefano Mtangoo

Dani AI

Generated

Brief, practical suggestion that builds on and posts: tables can work, but modern CSS gives a cleaner, semantic way to get fixed 200px sidebars, a flexible center column, a header, a "hot issues" row, and a footer — all without JavaScript and with equal-height columns by default.

Example using CSS Grid (semantic HTML + no JS):

<div class="site">
  <header>Header</header>
  <div class="hot">Hot issues</div>
  <aside class="left">Left sidebar</aside>
  <main>Main content</main>
  <aside class="right">Right sidebar</aside>
  <footer>Footer</footer>
</div>
.site {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header"
    "hot    hot    hot"
    "left   main   right"
    "footer footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
.hot   { grid-area: hot; }
.left  { grid-area: left; }
main   { grid-area: main; }
.right { grid-area: right; }
footer { grid-area: footer; }

.site > * { box-sizing: border-box; padding: 12px; }

Troubleshooting tips: add box-sizing: border-box so padding does not break widths; use media queries to collapse sidebars on small screens; if ancient-browser support is required, provide a simple float or display: table-cell fallback (or keep a table-based fallback). For reference on modern techniques see the MDN Grid docs and a Flexbox guide for alternative layouts: MDN CSS Grid and A Guide to Flexbox on CSS-Tricks.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

This is a case that needs a table. It is extremely difficult to do it with divs and css. But you can certainly use css to format the table.

If the sides are empty, just use padding on the body tag.

There is a misconception on removing tables from websites:

The original problem was the misuse of tables, because there were no margin, border, or padding attributes available without tables. So web programmers started using tables to create these styles.

Tables should be removed if they are used to create margins, borders, or padding on otherwise plain sites.

Tables should be retained if a strict layout is needed, because they are the only web objects that always hold the positions of the contents the same, relative to each other. Pure div/css designs fall apart if the contents don't fit.

For example, my home page is designed with two div columns, but it collapses to one column with a low-resolution browser, a small browser window, or on Web TV.

Member Avatar for Stefano Mtangoo

This is a case that needs a table. It is extremely difficult to do it with divs and css. But you can certainly use css to format the table.

You are right Midi, I have decided to go on with tables and in few clicks I have Made almost Whole layout of site. But I would like to know good site that organizes things well like www.zetcode.com on XHTML/CSS.

Again thanks for your precious help.
Steve

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.