This is what I'm trying to achieve. Basically there's two columns, and then the largest column on the left is split into 3 more columns. I've been playing with it for hours but all I seem to get is error messages. <table width="100%" cellspacing="0" cellpadding="5" border="0" align="center"> <tr> <td valign="top" width="78%"> <table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> table contents </tr> </table> <br /> <table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> table contents </tr> </table> </td> <td valign="top" width="22%"> <table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> table contents </tr> </table> </td> </tr> </table> <br /> Code (markup): The code above is for this layout, I don't know how to add the other 2 columns in. Any help is greatly appreciated.
Your code is wrong - you need <td> tags for the : <table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> table contents </tr> Table contents. Think of <tr> as row and <td> as columns.
How would I go about that? I haven't used div much, I'll go look it up now though. But I need to have the tables there, that's essential, the code I showed has the contents deleted as its quite long
This took me less than 10 seconds. You would have easily spent an hour with DIV's, especially writing all the hacks to make it cross browser compatible. <table border="1" width="100%"> <tr> <td width="75%" colspan="3"> </td> <td width="25%" rowspan="2"> </td> </tr> <tr> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> </tr> </table> PHP:
I did it in a table for You You should view/work with this in dreamweaver. Oh... and You can set the widths Yourself, Im too lazy. But here You are.. <table width="100%" border="0"> <tr> <td> <table width="100%" border="0"> <tr> <td> </td> </tr> </table> <table width="100%" border="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table> PHP:
CSS #ad { float:left; width:100%; } #banner { width:100%; float:left; } .contentColumn { float:left; width:33%; } #leftContent { float:left; width:78%; } #rightContent { float:right; width:22%; } Code (markup): HTML <div id="leftContent"> <div id="banner"> This is your banner. Although in the CSS you will have to define a height and a background image. </div> <div class="contentColumn">Column 1</div> <div class="contentColumn">Column 2</div> <div class="contentColumn">Column 3</div> </div> <div id="rightContent"> <div id="ad"> This is your ad. You will have to define a height and put some code in here, etc. </div> </div> Code (markup):
Thank you all for your help. However, I'm still having issues. You see, the blocks in the image I posted on the first post are all seperate tables, they contain their own rows. And so I think I can't use any of the code you have provided. It's basically like that, but each of the columns in the code you guys provided are tables and those tables contain row. It's just that part I can't work out. Below is the code for the long box for 78% length and one of the 3 tables I need under it. <td valign="top" width="78%"> <!-- BEGIN welcome_text --> <table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> <td class="catHead" height="25"><span class="genmed"><b>{L_NAME_WELCOME}</b></span></td> </tr> <tr> <td class="row1" align="left"><span class="gensmall" style="line-height:150%">{WELCOME_TEXT}<br /> </span></td> </tr> </table> <br /> <!-- END welcome_text --> <!-- BEGIN fetchpost_row -- <table width="33%" cellpadding="2" cellspacing="1" border="0" class="forumline"> <tr> <td class="catHead" height="25"><span class="genmed"><b> <a href="{fetchpost_row.U_VIEW_COMMENTS}">{L_ANNOUNCEMENT}: {fetchpost_row.TITLE}</a></b></span></td> </tr> </table> <!-- END fetchpost_row --> </td> Code (markup): Again, any help is greatly appreciated.
Yeah i dislike tables, seems like you got the help you need but in future i advise you to use divs so much easier and so much quicker.