Member Avatar for Brinnie

I'm trying to make a link directory.
In short, It's going to have 9 categories and I want it to look like this:

_ _ _
_ _ _
_ _ _


At first, I made a 3x3 table. But when anyone submits a link, it breaks the whole thing. :shifty: You know?

If someone adds a link to the middle category... Enough of my n00bness already, I think you know what I'm saying.

Thank you. :)

  • 5 Contributors
  • 17 Replies
  • 633 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Briefly: the problem isn’t “9 boxes” so much as how they’re laid out. A 3×3 table ties each cell to the row height, so when one category grows it forces the entire row taller and shifts the others. described that exact symptom; and pointed toward avoiding a rigid 3×3 table and making columns independent, and suggested moving to CSS instead of nested tables. The simplest, most robust approach is to make three independent column containers and stack category blocks inside each column — then adding links in one column won’t change the vertical position of the others.

Practical example (minimal structure you can adapt):

<div class="layout">
  <aside class="col">
    <section class="category">Category A — list of links</section>
    <section class="category">Category D — list of links</section>
  </aside>

  <main class="col">
    <section class="category">Category B — list of links</section>
    <section class="category">Category E — list of links</section>
  </main>

  <aside class="col">
    <section class="category">Category C — list of links</section>
    <section class="category">Category F — list of links</section>
  </aside>
</div>

<style>
.layout{display:flex;gap:20px;align-items:flex-start;}
.col{flex:1;box-sizing:border-box;padding:8px;}
@media(max-width:700px){.layout{flex-direction:column}}
</style>

Notes and troubleshooting: use semantic blocks (<aside>/<main>/<section>) so each column is its own flow. The key is align-items:flex-start (keeps columns top-aligned and independent). If your links come from a single stream and you want them evenly split into columns, distribute them server‑side into three arrays (modulo/indexing) before rendering rather than trying to force a 3×3 grid in HTML. If supporting very old browsers, floats or the table valign trick mentioned earlier can work as a fallback, but CSS-based columns (flexbox/grid) are easier to maintain and responsive.

Recommended Answers

All 17 Replies

Member Avatar for alpha_foobar

Umm, i'm not really sure what your saying here. But I think the solution is to not use a 3x3 table. Try a 3x1 table instead.

i.e. COL1 COL2 COL3

Member Avatar for ProFreelance

I really don't understand either, but if you have a number of entry's not equal to a multiple of 3, you will have to calculate the left overs with the "mod" function if it is a dynamic webpage, and then add in an entry for the left over table datas <td>s.

Member Avatar for chrchcol

Well if I understand what you are trying to do you need to create a table. Create one table to lock your format and inside create another table that has three rows.

Member Avatar for Brinnie

No no no, let me find similiar link page and I'll get back to you.

Member Avatar for ProFreelance

Ok, here's a similiar page:
http://www.art-bridge.com/directory/abdir.htm

Do you mean a webpage in the following format:

----------------------
|....|...........|...|
|....|...........|...|
|....|...........|...|
|....|...........|...|
|....|...........|...|
|....|...........|...|
----------------------

Where the red is one section, the blue is another, and the green is a third?

You should use Tables inside of Tables.

<TABLE>
   <TR>
       <TD>
          Column 1 Here
       </TD>
       <TD>
          Column 2 Here
       </TD>
       <TD>
          Column 3 Here
       </TD>
   </TR>
</TABLE>

You can replace column 1, 2, and 3 with more tables to hold information.

Column 2 could equal =

<Table>
     <tr>
          <th>Table in the middle</th>
     </tr>
     <tr>
          <td>Some information of the table</td>
     </tr>
</Table>
Member Avatar for alpha_foobar

So whats the issue when people add links?

But this page just uses lots of tables to structure everything... basically like this:

<table width="100%">
   <tr>
      <td width="150" bgcolor="black"><font color="white">left column</font></td>
      <td width="650" bgcolor="blue"><font color="white">center column</font></td>
      <td width="150" bgcolor="red"><font color="white">right column</font></td>
   </tr>
</table>

And you can fill the cells in the table to add more levels of formatting...

Member Avatar for Brinnie

well, alpha_foobar, I wanted to put a horizontal row of affiliates down the left side.
But when I tested it and added some links, it pushed the tables in the middle down. :(

So it's like, the ultimate goal is to have three collums- where changes made in 1 column do not effect the other 2.

Ya know?


I can design a mock-up in photoshop of what I'm going for if you guys have the patience to show me how to implement it.

Member Avatar for ProFreelance

add this to the <td> tag for column 2,

<td valign=top>

That way when u add links to the left, the stuff in the middle stays top aligned.

Member Avatar for Brinnie

add this to the <td> tag for column 2,

<td valign=top>

That way when u add links to the left, the stuff in the middle stays top aligned.

the thing is, all 9 categories are going to expand downward when users submit links... should I add that to all of them?

Member Avatar for Brinnie

yes

ok, ill try it and get back to yall. :)

Member Avatar for tgreer

You can look at my site, shown in my signature, for an example of 3-column layout using CSS, instead of tables. The middle column expands or shrinks with the size of the browser.

Member Avatar for ProFreelance

I think what you mean is by using divs instead of tables. Div's are not CSS, they are HTML.

Member Avatar for tgreer

No, I mean using CSS. Sure, I'm using DIVs to contain the content, but "using DIVs" doesn't give you columns. One has to use CSS to achieve that effect.

Member Avatar for Brinnie

You can look at my site, shown in my signature, for an example of 3-column layout using CSS, instead of tables. The middle column expands or shrinks with the size of the browser.

That's essentialy what I'm trying to do.

Can I build off yours? I won't look anything like it in the end, I promise. :p

Member Avatar for tgreer

Sure, no problem.

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.