Div based, tableless forum?

[smerny]

I tried... this is what i came up with:

 

http://www.submitandrate.com/forum/index.php

 

1) I'm getting a problem with the divs stacking... especially the "title - description" div on the left... if the screen gets narrower, instead of text wrapping, it stacks the divs

 

2) on the main page, '[info]' is just there to show that the div isn't taking the complete height of the outer div (the border doesn't reach all the way down).

 

3) when you get to the posts level, for some reason the first post is doing the right thing, but the others aren't.... and also the same problem with stacking when you narrow the screen or the text is too long. (http://www.submitandrate.com/forum/index.php?page_mode=topicview&topic_id=1)

 

I know most people use tables with forums and maybe that's what I'll end up having to do I guess.... but I figured I'd post here to see if anyone else has ideas to try first....

 

so you don't have to copy and paste for css, here it is

 

body {

background: #000;

color: #999;

}

#container{

width:900px;

margin: 0 auto;

padding: 0;

}

.left {float:left;}

.right {float:right;}

 

/*###### FORUM STYLING ###########################################*/

 

#forumcontainer{

width:95%;

margin: 0 auto;

padding:0px;

}

#forumhead{

width:100%;

overflow:auto;

background:#3333ff;

margin:0;

padding:2px 0;

color: #ccccff;

font: bold 12px arial;

border: 5px solid #3333ff;

}

#forumhead a:link {color:#ffff00}

#forumhead a:visited {color:#ffff00}

#forumhead a:hover {color:#ffff00}

#forumhead a:active {color:#ffff00}

 

.fh1{

background: #3333aa;

color: #ccc;

border: 0 solid #3333ff;

border-left-width: 5px;

border-right-width: 5px;

border-bottom-width: 1px;

margin:0;

padding: 0px;

font:bold 18px arial;

overflow: auto;

width:100%;

}

.fh2{

background: #000099;

color: #ccccff;

margin: 0;

padding: 0px;

border: 0 solid #3333ff;

border-left-width: 5px;

border-right-width: 5px;

border-bottom-width: 1px;

overflow:auto;

width:100%;

}

.fh2 a:link {color:#ffff00}

.fh2 a:visited {color:#ffff00}

.fh2 a:hover {color:#ffff00}

.fh2 a:active {color:#ffff00}

.fh2_1{

text-align:left;

boarder:0;

float:left;

}

.fh2_2{

border: 0;

float:right;

}

.fh2_2inner{

border: 0 solid #3333ff;

border-left-width: 1px;

float:right;

padding: 0 5px;

}

#forumfoot{

}

 

.postcontainer{

overflow:auto;

width:100%;

background: #000099;

color: #ccccff;

margin: 0;

padding: 0px;

border: 0 solid #3333ff;

border-left-width: 5px;

border-right-width: 5px;

border-bottom-width: 1px;

}

.postcontainer a:link {color:#ffff00}

.postcontainer a:visited {color:#ffff00}

.postcontainer a:hover {color:#ffff00}

.postcontainer a:active {color:#ffff00}

.postinfo{

border: 0 solid #3333ff;

border-right-width: 1px;

padding:0;

float:left;

height:100%;

width: 150px;

}

.post{

border: 0;

padding:0;

float:left;

height:100%;

}

 

/*###### END FORUM STYLING ######################################*/

[haku]

Download and install phpbb3 - they don't use tables. You can pick that apart and see how they have done it.

[smerny]

thanks, *checks it out*