Help with this CSS example

I’m new to tableless tables, and I’m trying to create a layout for my website. I made it work, but don’t think I did it right. Even though it does work, are there any suggestions to maybe clean it up a little??

Here’s the CSS:
#cruise {
width: 620px;
position: relative;
overflow: auto;
margin-right: 70px;
}

.cl-name {
position: relative;
float: left;
width: 260px;
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
color: #B71000;
font: bold 12px/150% Arial, sans-serif;
text-align: center;
margin-bottom: 5px;
}

.cr-city {
position: relative;
float: left;
width: 260px;
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
color: #B71000;
font: bold 14px/150% Arial, sans-serif;
text-align: center;
margin-bottom: 5px;
}

.cr-info {
position: relative;
float: left;
clear: left;
width: 260px;
font: bold 10px Verdana, Arial, sans-serif;
text-align: center;
}

.cr-text {
position: relative;
float: right;
width: 340px;
font-size: 12px Arial, sans-serif;
text-align: justify;
margin-left: 20px;
}

.cr-nav {
width: 320px;
position: relative;
float: right;
text-align: center;
margin: 8px 0px 50px 0px;
}

Here’s the sample:
<div id=“cruise”>
<div class=“cr-city”>APOPKA</div>
<div class=“cr-text”>Held at the Rock Springs Bar and Grill, 4939 Rock Springs Road, and limited to vehicles 1982 and older. There’s three trophies randomly awarded, DJ and karaoke, 50/50 drawing, $2 beer specials, and food is available.</div>
<div class=“cr-info”>Second Sunday of the Month<br />2:00 PM - 6:00 PM<br />(407) 886-0057</div>
<div class=“cr-nav”><a href=“http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=4939+Rock+Springs+Road,+Apopka,+FL&sll=37.0625,-95.677068&sspn=33.160552,78.662109&ie=UTF8&ll=28.758668,-81.508491&spn=0.008954,0.019205&t=h&z=16&iwloc=A” target=“top”><img src=“events/map.png” border=“0”></a></div>
</div>

A layout like that might get hard to manage as the site gets bigger. first consider the whole page design, then work out the best way to organize things. If you have columns, it’s best to wrap each column in a div to help things stay in place.

At the moment, there doesn’t seem to be a role for position: relative on any of those divs.

tableless tables

???

Just to be clear, if your data is tabular (there is semantic/contetxual meaning in the columns/rows… then use TABLE), for the most part you will be able to stile it to look whichever way you want with CSS anyway.

That beign said…
you DONT need to give every element position:relative; just those that you intend to display or those who have AP’ed descendants which you want position relative to the afore mentioned elements ( not of this is present in your small sample)

Also, semantically, your navigation should be a UL.

hope that helps a lil.

Thanks for the help! After reading both your comments, CSS makes a little more sense to me. And especially the tip about the navigation! Thanks again, and I’m sure I’ll be back soon!