Help!! Floating a <dl>

[joshtilton]

Hi! I need some help correctly laying out some element on my website.

Currently I have everything functioning using different divs. I know that using a detailed list would actually be the correct way of doing this. I am just having a pain trying to figure out how to do it. Here is what i am trying to achieve :http://www.joshtilton.com/websites.jpg

This is currently the code i am using within a <div> wrapper :


<div id="level1">
<div id= "one"><img src="webcontentimages/swthumb.jpg" /><span class="style2">SERVICES:</span> Logo, site design, and Flash.
<p> <dt class="view-site"><a href="images/sw.jpg" rel="lightbox[sites]" title="Salisbury Woodworks website">image #1</a></dt></div>

<div id= "two">
<div class="twocnt"><img src="webcontentimages/hsthumb.jpg" /><span class="style2">SERVICES:</span> Logo,
photography, site
design,
<p> <img src="webcontentimages/viewbtn.jpg" /></div>
</div>
<div id= "three"><img src="webcontentimages/v2thumb.jpg" /><span class="style2">SERVICES:</span> Flash,
gallery, design
and html.
<p> <img src="webcontentimages/viewbtn.jpg" /></div> and for the css:


div#one{

float:left;
width:137px;
height: 300px;
}

div#two{
float : left;
width:265px;
height: 300px;
}

div#three{
float : right;
width:137px;
height: 300px;
}

.view-site a {
display: block;
text-indent: -9999px;
width: 137px;
height: 20px;
border: 0;
background: url(webcontentimages/viewbtn.jpg) no-repeat; }
I'm still a newb at this and im doing what i can with what I know. I know that the above code works (only in firefox and safari, forget IE6 and 7) If anyone can help me out, please do so!

[Icy Penguin]

Could you post an example of what it looks like?

[thebloodpoolkid]

You don't necessarily have to use a definition list. You can use an unordered list as well.

In your code I do not see where you are using a definition list but rather just the <dt> tag.


<dl>
<dt>Title</dt>
<dd>Text</dd>
</dl>