Search code examples
htmlblock

Arranging UL/LI/Divs into a block - Side by side


I'm attempting to customize a vbulletin theme further then my experience allows me to (I really enjoy web development so I'd like to really go out of the box and attempt to learn something with this one)

My issue is, when I try to arrange the forum sections into a side-by-by block, they get disoriented and misplaced... With vbulletin, its difficult to pin-point what exactly is causing certain issues even with firebug.

Essentially, this is what I am looking to get

[Forum 1] [Forum 2]
[Forum 3] [Forum 4]
[Forum 5]

and so on.. I was able to throw this together using just regular uls/lis and divs... but when I get to something dynamic where you actually need to pull the data from somewhere, it gets confusing for me.

Here is what it looks like currently, http://www.eldersreach.com/forum.php?styleid=90

You may need to head down to the bottom left and change the theme to "ESOLight" that is where the issue resides


Solution

  • Set the width to each element to 50% and set the "float" property to "left".

    CSS

    div.forum {
        width:50%;
        float:left;
    }
    

    Note that if you have borders or padding, etc, you will need to adjust the width property respectively to your other style attributes.