[HOW TO - vB4] Two column forum/sub-forum setup via CSS only

[felixR]

Awesome Lynne!

I still get the comma in my subforum list though even after I added in:

.commalist li.subforum:after {
content:"";
}

Edit:

Nevermind Thanks again.

[setishock]

I stuffed in the code in the additional css and it works better than last time I try it. I was on 4.1.2 now on 4.1.2 pl8.

So to make the double column affect just one category just add the line with the cat number edited in? Just that simple?

[Lynne]

Originally Posted by setishock

I stuffed in the code in the additional css and it works better than last time I try it. I was on 4.1.2 now on 4.1.2 pl8.

So to make the double column affect just one category just add the line with the cat number edited in? Just that simple?

Yep, just add the catid.

[Reece^B]

Does anyone know how to adjust height?

[Lynne]

You would use the height property (which is shown in many of the CSS rules).

[Reece^B]

My current code is:

#cat51 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {
    border-top: 0 none;
    height:100px;
}
#cat51 .forumrow .table {
    height: 100px;
}
#cat51 ol.childforum {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
#cat51 .childforum li.forumbit_post {
    clear: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 50%;
}
#cat51 #forums .L1 .L2 {
    clear: none;
}
#cat51 .forumbit_post .forumrow .forumlastpost {
    clear: both;
    width: 95%;
}
#cat51 .forumbit_post .forumlastpost .lastpostby {
    display: block;
    float: left;
}
#cat51 .forumbit_post .forumlastpost .lastpostdate {
    display: block;
    float: right;
}
#cat51 .forumbit_post .forumlastpost .lastposttitle {
    display: block;
    float: left;
}
#cat51 .forumbit_post .foruminfo {
    clear: right;
    float: left;
    min-width: 50%;
    width: 70%;
}
#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {
    width: 20%;
height:100px;
}
#cat51 .forumbit_post .forumlastpost .lastposttitle {
    display: block;
    float: left;
}
#cat51 .forumbit_post .foruminfo {
    clear: right;
    float: left;
    min-width: 50%;
    width: 70%;
}
#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {
    width: 20%;
    height:100px;
}
#cat51 .forumthreadpost {display: none;}
#cat51 .forumlastpost {display: none;}
#cat51 .forumactionlinks {display: none;}
#cat51 .forumbit_post .foruminfo .forumdata .datacontainer {
    padding-left: 140px;
    width: 80%;
}

The code in red is the height i've added, which has given me the correct height. (I don't know if this is in the right location?)

However if you see the screen attached the columns aren't evenly spaced. How do I do this?! I keep trying to no avil.

[Lynne]

You have some which naturally want to be taller than 100px. So, you need to pick something larger, like 120px to make them all the same height. Or, you need to set the overflow to hidden, but then some text may disappear.

[Reece^B]

How can I move that text so it's not over lapping?

[K4GAP]

Is anyone using this on 4.2.1 ?

[Reece^B]

yes