Looking to make a 3-5 column footer for my wordpress site

Have been tinkering around with code, but I can't seem to get the divs and other features set up correctly.

Ideally, I would love to have it look like the very bottom of this page.

http://www.arkayne.com/

Can anyone help?

 

for a simple layout of
ul#footer-5-col > li.f5c-li*5 > [h2 + ul > li*n > a]

the following style definition works perfectly on FF & IE

<style>
	body, ul, li {
		margin: 0;
		padding: 0;
		}
	#footer-5-col .f5c-li {
		float: left;
		width: 20% !important;
	}
	#footer-5-col .last {
		width: 19.5%;
	}
</style>

Code (markup):

a sample html layout of the aforementioned
ul#footer-5-col > li.f5c-li*5 > [h2 + ul > li*n > a]
is as here

<ul id="footer-5-col">
	<li class="f5c-li">
		<h2>List Heading 1</h2>
		<ul>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
		</ul>
	</li>
	<li class="f5c-li">
		<h2>List Heading 2</h2>
		<ul>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
		</ul>
	</li>
	<li class="f5c-li">
		<h2>List Heading 3</h2>
		<ul>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
		</ul>
	</li>
	<li class="f5c-li">
		<h2>List Heading 4</h2>
		<ul>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
		</ul>
	</li>
	<li class="f5c-li last">
		<h2>List Heading 5</h2>
		<ul>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
			<li><a href="javascript:void(0)">Your Link Here</a></li>
		</ul>
	</li>
</ul>

Code (markup):

If you are interested, the catches are
1. using the !important directive with the property value 20% for width of each li.f5c-li. This helps firefox work fine with the normal (read w3c standard) float definitions
2. the class "last" added to the last li node (ie the last column) and the width value tweaked to 19.5%. actually it requires to be 3px less but for all practical purposes this works

 

If you have tried already then it might be worth explaining the problem or posting an example of it. In cases like these where you want to replicate another site it's worth looking at the Source Code of the site and the CSS to match the section you want to replicate...

But as bvraghav has stated you just want 5 seperate sections which are floated left so that they appear next to each other, you might want/need to use DIV's instead of <ul>'s dependig on the content going in each section. Also it's probably worth specifying px for the width of each section if your site has a fixed width layout to avoid any annoyances with percentages.

 

there is a plugin available for this in wordpress.

 

Here's a tool you can use to generate the css and html for 5 columns

http://www.pagecolumn.com/5_column_div_generator.htm

 

thanks for the information...
a word on which plugin(s) exactly will be highly appreciated.

thanks in advance.