Hey all!

As some of you might have cought on I am about to code my own forum. ANd only for me to learn more about everything that covers the art of building homepages.

Anyway, I have cought on some problem. First I made a table/div based layout and thought it was good. How ever since I don't really like tables I tried to do the same thing, both with lists and with only divs.

This is how the first basic layout options turned out.
http://www.cixz.org/dev/layouttest.html
CSS can be found here:
http://www.cixz.org/dev/forumlayout.css

I have a small problem though, with divs and lists I got the problem of having the cellpaddinh/cellspacing options. I wanted to make them look exatly like the table based layout.

Also I could take this time to ask if there are any benefits on doing it with tables, divs or lists?

Anyone have a solution to this i would be really happy

Ok I solved my own problem and felt like i should share it with everyone if anyone else want to do this. Hope it helped someone

Made it with lists and got a quite clean code.

:::EDIT::: Ok seems like I failed again, this doesn't work at all satisfactory in IE7 and will most likely look like CRAP in everything except FF
Anyway, you have the code to play with if you want it :P /EDIT

Here it is, the lists that look like a table.
XHTML-Code

<div class="BBwrap">

    <ol>
        <li>
            <ul class="cixzName">
                <li>
                    <h1>Welcome to cixzBB</h1>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li class="cixzCat">
                    <strong>First Category Line</strong>
                    <div>Short Description of Forum</div>
                </li>
            </ul>
        </li>
        <li>
            <ul class="cixzHead">
                <li class="topicCell1"style="padding:0 0.2em 0 0.3em">
                    &nbsp;&nbsp;
                </li>
                <li class="topicCell2">
                    Forum
                </li>
                <li class="topicCell3">
                    Last Post
                </li>
                <li class="topicCell4">
                    Threads
                </li>
                <li class="topicCell5">
                    Posts
                </li>
            </ul>
        </li>
        <li>
            <ul class="cixzTopics">
                <li class="topicCell1">
                    <img src="http://www.webmaster-talk.com/images/forum-read.png" />
                </li>
                <li class="topicCell2">
                    Forum
                </li>
                <li class="topicCell3">
                    Last Post
                </li>
                <li class="topicCell4">
                    Threads
                </li>
                <li class="topicCell5">
                    Posts
                </li>
            </ul>
            <ul class="cixzTopics">
                <li class="topicCell1">
                    <img src="http://www.webmaster-talk.com/images/forum-unread.png" />
                </li>
                <li class="topicCell2">
                    Forum
                </li>
                <li class="topicCell3">
                    Last Post
                </li>
                <li class="topicCell4">
                    Threads
                </li>
                <li class="topicCell5">
                    Posts
                </li>
            </ul>
            <ul class="cixzTopics">
                <li class="topicCell1">
                    <img src="http://www.webmaster-talk.com/images/forum-read.png" />
                </li>
                <li class="topicCell2">
                    Forum
                </li>
                <li class="topicCell3">
                    Last Post
                </li>
                <li class="topicCell4">
                    Threads
                </li>
                <li class="topicCell5">
                    Posts
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li style="text-align:Center;">
                    <strong>:: Forum Opt #1 :: Forum Opt #2 ::</strong>
                </li>
            </ul>
        </li>
    </ol>

</div>

And the CSS for all this.

/* CSS For Forum Layout */

.BBwrap
{
    text-align:left;
}

/* Global styles for all elements */
.BBwrap ol, 
.BBwrap ol li, 
.BBwrap ol li ul,
.BBwrap ol li ul li
{
    background:#fff;
    color:#000;
    margin:0;
    padding:0;
}
/* Global style for all tables */
.BBwrap ol,
.BBwrap ol li ul
{
    border:1px solid black;
    width:100%;
    display:table;
}
/* Global style for all cells */
.BBwrap ol li,
.BBwrap ol li ul li
{
    margin:1px;
}
.BBwrap ol
{
}
.BBwrap ol li
{
    display:table-row;
}
.BBwrap ol li ul
{
}
.BBwrap ol li ul li
{
    display:table-cell;
}

/* Table-Row styles */
.cixzHead .topicCell1,
.cixzTopics .topicCell1
{
    width:5em;
    border-right:1px solid black;
}
.cixzHead .topicCell2,
.cixzTopics .topicCell2
{
    border-right:1px solid black;
}
.cixzHead .topicCell3,
.cixzTopics .topicCell3
{
    width:20em;
    border-right:1px solid black;
}
.cixzHead .topicCell4,
.cixzTopics .topicCell4
{
    width:7em;
    border-right:1px solid black;
}
.cixzHead .topicCell5,
.cixzTopics .topicCell5
{
    width:7em;
}