Using divs instead of table columns on home page

I've been working on formatting the home page of my classifieds without using the table columns. This way each category with subcategories can float in their own div...I'm finding this allows a cleaner look for what I'm after. I made the following change to the code on the home.tpl and was hoping someone could tell me if this is correct or needs some changes. It does look fine on the site.

HTML:

<table class="main" width="100%">
	<tr>
		<th>{$smarty.const.LANG_BROWSE_CATEGORY}</th>
	</tr>
	<tr>
		<td valign="top">
			{section name=tr loop=$data step=$cols}
				{section name=td start=$smarty.section.tr.index loop=$smarty.section.tr.index+$cols}
					<div class="categoryhome">
						{if $data[td]<>""}
							{$data[td].start_link}<img src="{$data[td].image}" border="0" alt="{$data[td].name}" /></a> 
							{$data[td].start_link}<strong>{$data[td].name}</strong></a>
							{if $data[td].total <> ''}
							({$data[td].total})
							{/if}
							{$data[td].subcats}
							{$data[td].description}
						{/if}
					</div>
				{/section}
			{/section}
		</td>
	</tr>
</table>

It looks correct to me. Just from glancing at it you may want to put the categoryhome div inside the if($data[td']) just incase it is blank. But I think that is required.

Thanks much!

So far my testing shows good browser compatability and it does validate as XHTML transitional

Classifieds Site

I haven't finished yet...but getting there...

Thanks...I hadn't tested on Safari.

I did have to add a "display: inline" to the main div to fix an ie6 float problem...but other than that I'm pleased with the outcome. One problem with using floating divs for the category layout is that you have to watch the order in which they are placed....you have to make sure to keep the categories with the most subcategories to the left to have them fall into place nicely...

Would be nice if added to the script by default or make it possible to edit from templates, not healthy to modify core files, it makes upgrades more complicated ..

OK sorry, because there is a case where you have to edit some Categories.php file in order to display categories in a certain way. Is that possible through templates?

Hey Freeze, which part of the Home.tpl file did you replace with the code below?

I believe I replaced the code between the <table class="main" width="100%"></table>

This works great! but how can I put the categories in 3 columns instedad of 1?

I think this is not covered in the documentation... when I made those changes in the home.tpl file, all categories appears in a single column.

Take a look at your css and make sure that you set a width of each div that will allow for 3 columns and then make sure they float: left.

That should do it...

I cannot find that information in the css file. Can you help me with this?

Thank you for your patience.