div + css replacing table help

hi,
first of all i'm not very good at English and hope i won't type anything wrong.
i want to use div+css to replace table and i have this css and html:

 #page #content .mainbox { width:100%; margin:10px auto 0 auto; border:1px solid #D0DEEB; }
   #page #content .mainbox h3 { font-size:0.8em; background:#2E5570 url(images/mainbox_titlebg.png) left repeat-y; width:98.25%; color:white; padding:5px 8px; float:left; margin:0 auto; }
   #page #content .mainbox ul.forumlistcontainer {   list-style:none; margin:0 auto; padding-left:0; width:100%; }
   #page #content .mainbox ul.forumlistcontainer li * { width:100%; }
   #page #content .mainbox ul.forumlistcontainer li.forumlisthead { background:#5B7A8F; padding:0 0 0 64px; color:#000; }
   #page #content .mainbox ul.forumlistcontainer li.forumlisthead .namehead { float:left; width:45%; }
   #page #content .mainbox ul.forumlistcontainer li.forumlisthead .postshead { float:left; width:10%; }
   #page #content .mainbox ul.forumlistcontainer li.forumlisthead .lastposthead { float:left; width:35%; }

Code (markup):

            <div class="mainbox">
               <h3>Main Box Title</h3>
                <ul class="forumlistcontainer">
                   <li class="forumlisthead">
                        <div class="namehead">Name</div>
                        <div class="postshead">Topics</div>
                        <div class="postshead">Posts</div>
                        <div class="lastposthead">Last Post</div>
                </ul>
            </div>

Code (markup):

but the result is not as same as i expected,
the border of div.mainbox ends before ul.forumlistcontainer and ul.forumlistcontainer should has the background #5B7A8F but it didn't.

how can i correct the errors and the code? thanks a lot for help.

 

Well... first off DIV's are invalid markup inside a LI, as LI's can only contain inline-level elements. (which is NOT the same thing as display:inline) - second you aren't closing your LI (though that could hinge on your doctype), if there's only one LI you shouldn't even NEED a class on it, you have block level elements they DEFAULT to width:100%...

and frankly, what you have LOOKS like tabular data, so should this be four TH's before a set of TD? (It's ok to use a table for tabular data! That's what it's FOR!)

Tables should be replaced when used to layout a page, NOT when they are used to layout a TABLE.

 

I'm not sure why you want to do this and it seems pretty pointless. As what deathshadow has mentioned, tables are meant to be used for tabular data. I suggest you shift your effort to coding your site's layout with css and just continue using tables for presenting your data (that's what they are for anyway). If you need your tables to look nicer, then use css to style them.