CSS, table-like nav without table, help!

I have a 4 cell nav I would like to be done with CSS.

[Garfie]

I am trying to get a navigation link set I thought would be neat, and ive tried a hundred things and dont want a table and need to do it in all CSS and Divs. absolute positioning cant be done, relative might be a possibility but I dont know the most about it.

basically, here is a diagram of what I need.

______________________
¦................¦................¦
¦................¦................¦
¦................¦................¦
¦------------------------¦
¦................¦................¦
¦................¦................¦
¦................¦................¦
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
I want the text to be some how centered with padding, but I need the height of each "cell" to be fixed.
I would also like each "cell" itself to be a link, to change bg colors with a:hover etc. Any help ins appreicated :\

[Bonusbana]

Welcome to WebmasterWorld!

If this is what I think it is, you are trying to create a two-column matrix with 5-6 cells in height. I suggest you use two divs for the two columns; either one or both of them floating left or right. Add an unordered list inside each div and put your menu items inside the list. it should look something like:

<div id="left">
<ul>
<li><a href="#">whatever</a></li>
<li><a href="#">leftside</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">whatever</a></li>
<li><a href="#">rightside</a></li>
</ul>
</div>

Now, since you are wrapping an <a> around your links, you can style them as a display:block; in your css. That opens up for many nice cross-browser :hover possibilities and good control over height and width.

Your css could probably look something like:

<style type="text/css">
#left {
[red]float: left;[/red]
width: 100px;
}
#right {
margin-left: 100px;
width: 100px;
}
ul {
list-style-type: none;
}
li a {
[red]display: block;[/red]
width: 100px;
[red]line-height: 20px;[/red]/* centers the text vertically */
background: #aaa;
}
li a:hover {
background: #bbb;
}
</style>

You would have to adjust margins, fonts paddings etc as well. Please note the box-model bug in IE5/win if you use padding. You can also add a

height: 20px;

in your

li a

style, but then you wont allow the cells to grow when the users resizes the text, wich could be a nice feature.

I am just writing this on the fly, and I can not guarantee that the code actually works..:

I hope this will get you started.

[Garfie]

That worked out very well! I got the basic thing going, but now I have a problem.
Between left div and right div theres about a 2 pixel space in IE, and only IE. :\

[jackson]

detracting a little and "thinking out of the box" some - do a google search on "sons of suckerfish" and see what they have there.

[Bonusbana]

Well, welcome to the world of CSS and IE quirking..:

The two pixel space could be the double-margin bug in IE. Try adding a display:inline; to your floating div #left and see what happens.

IE has a lot of little devils inside, and I think you should just experiment with margins/paddings and search for known IE bugs until you solved this one.