Problem using <DIV> & CSS with ASP.

[Belfast Web Designer]

I am a web-design by trade, I have recently got into using CSS and <DIV> for my
page layouts. My problem comes when I pass the page layouts/templates onto the
programmer (he uses ASP).

For example if I wanted a row of 3 thumbnails, each with a caption of text
below them I would wrap them in a DIV like so...

HTML:

<div class="thumbnail">
<img src="thumb1" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

<div class="thumbnail">
<img src="thumb2" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

<div class="thumbnail">
<img src="thumb2" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

CSS:

.thumbnail {
float: left
}

This works fine, but if this was then brought into ASP as a repeat region and
there was 12 images (4 rows of 3 images) the 'float' property would mean each
row would overlap. I have tryed nesting each row into a container DIV and using
the clear property, but again float overrides this...

What is the way round this? I am very keen to learn the DIV and CSS methods as
I find their structure within an HTML document is far cleaner and better than
tables, but problems like this are causing me nightmares. Could someone help me
with this, or even point me in the direction of a ttutorial to get this sorted?

Many thanks, any help would be really appreciated

[Murray *TMM*]

<div class="thumbnail">
<img src="thumb1" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

<div class="thumbnail">
<img src="thumb2" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

<div class="thumbnail">
<img src="thumb2" width="125" height="125" alt="" />
<p>Thumbnail 1</p>
</div>

<br style="clear:both;" />

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Belfast Web Designer" <webforumsuser@macromedia.com> wrote in message
news:dk93mt$c0f$1@forums.macromedia.com...

>I am a web-design by trade, I have recently got into using CSS and <DIV>
>for my
> page layouts. My problem comes when I pass the page layouts/templates onto
> the
> programmer (he uses ASP).
>
> For example if I wanted a row of 3 thumbnails, each with a caption of
> text
> below them I would wrap them in a DIV like so...
>
> HTML:
>
> <div class="thumbnail">
> <img src="thumb1" width="125" height="125" alt="" />
> <p>Thumbnail 1</p>
> </div>
>
> <div class="thumbnail">
> <img src="thumb2" width="125" height="125" alt="" />
> <p>Thumbnail 1</p>
> </div>
>
> <div class="thumbnail">
> <img src="thumb2" width="125" height="125" alt="" />
> <p>Thumbnail 1</p>
> </div>
>
> CSS:
>
> .thumbnail {
> float: left
> }
>
> This works fine, but if this was then brought into ASP as a repeat region
> and
> there was 12 images (4 rows of 3 images) the 'float' property would mean
> each
> row would overlap. I have tryed nesting each row into a container DIV and
> using
> the clear property, but again float overrides this...
>
> What is the way round this? I am very keen to learn the DIV and CSS
> methods as
> I find their structure within an HTML document is far cleaner and better
> than
> tables, but problems like this are causing me nightmares. Could someone
> help me
> with this, or even point me in the direction of a ttutorial to get this
> sorted?
>
> Many thanks, any help would be really appreciated
>