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>