Help needed with layout using div's (example shown)

[Solarpitch]

Hey Guys,

I am just adding the finishing touches to my application but I am having mighty difficulty trying to implement the below style using div's. Below is an example of what I am trying to achieve, I just did this layout in fireworks as an example.

Getting the information there is no bother, its help I need with constructing the containers and that.

To be honest, my stylesheet is all over the shop . . . so probably better off not posting it. Anyone one of you guys like to help me out with this? It would be much appriciated and plus . . its christmas!! :D

Cheers!



[url=http://xs.to][img]http://xs510.xs.to/xs510/06522/example2.gif[/img][/url]

[ToonMariner]

[code]
<div id="container">
<h1 class="underline">New Callaway Big Bertha <span>(Uploaded on: 17-12-2006)</span?>
<div id="images">
  <img src="bigimage.jpg" width="xxx" height="yyy" title="blah" alt="driver" longdesc="pathtoitempage.html" />
<ul>
  <li><img src="thumbimage[0].jpg" width="xxx" height="yyy" title="blah" alt="driver" longdesc="pathtoitempage[0].html" /></li>
  <li><img src="thumbimage[1].jpg" width="xxx" height="yyy" title="blah" alt="driver" longdesc="pathtoitempage[1].html" /></li>
</ul>
</div>
<div id="details">
  <ul>
  <li><span>Section:</span> Mens</li>
  <li><span>Class:</span> Drivers</li>
  <li><span>Make:</span> Callaway</li>
  </ul>
  <ul>
  <li><span>Tel:</span> 0876141487</li>
  <li><span>Contact Name:</span> Andrew</li>
  <li><span>County:</span> Dublin</li>
  </ul>
</div>
<div id="text">
  <p>Brand new callaway....</p>
</div>
<div class="clearb"></div>
<h2 class="underline">Price: &euro;400
</div>
[/code]

css
[code]
.underline
{
border-bottom: 1px dashed #666;
}

h1
{
font-size: 0.9em;
}

h1 span
{
color: #ccc;
font-size: 0.7em;
vertical-align: middle;
}

h2
{
text-align: right;
font-size: 0.8em
}

div.clearb
{
clear: both;
}

div#images
{
float: left;
}

div#details
{
float: right;
}

ul
{
list-style: none;
}

div#images ul li
{
float: left;
width: /*imgwidth*/;
height: /*imgheight*/;
}


div#details ul li
{
margin: 0 0 10px 0;
}

div#details ul li span
{
display: block;
clear: none;
width: 80px;
}

[/code]

That should get you started....

Crikey! that chrimbo spirit has really kicked in.

[Solarpitch]

Thats brilliant. Thanks a million for your help! :)