Getting DIVs to act like letters

I need a flow and display professional ;)

[hakre]

Yeah, this is a problem for me since hours an i can not run out of this vicious CSS-circle.

So here is what I want to do:

I've got an image 120x120 pixel (thumbnail) and i want to put some text beneath it (description). Then around all this i'd like to have a border [I got this already, it's just to explain and seems only to work on display: block] and then this whole linked.

This 'Construct' should behave like a normal letter in a text and I want to be able to have one or more of these thumbnails next to each other without creating a table or similar.

This is what i've got so far, but the Problem is, that text or a second thumbnail will continue beneath it only.

<a href="bigurl" target="_blank" style="display: inline"><div style="position: relative; width: 120px; border: 2px solid #000; background-color: #aaa;"><img src="small.jpg" border="0" /><br />Description</div></a>

(the next box(es) schould be made the same like the code-snippet)

i was trying around with combos of inline and block styles, but i can not achieve bordered boxed next to each other. The width is indeed fixed to 120px if this helps.

-hakre

[encyclo]

I would start with a definition list to hold everything together:

<dl>
<dt><img src="image.jpg" alt=""></dt>
<dd>Description here</dd>
</dl>

With that, you can define the border on the

dl

which encloses both the image and the description. After that, you will need to experiment with

float:left;

to place the lists next to each other accross the width of the page. If I get a bit of time later I'll post some code ;)

[hakre]

hi encyclo,thanks fpr your answer so far.

what exactly is the benefit of using a dl instead of a div here. it this a kewl trick. using float: left makes my day with divs, too, but after a thumbmail, text will float quite around the thumbmail. maybe i need to give it a try first.

[encyclo]

A good example of this can be found here [maxdesign.com.au], including a code sample to work with.

The advantage of using a definition list is that it brings the items into a direct relation with each other, and it makes sense even when the CSS is disabled.

[photon]

hakre--

I don't believe you can have a block level attribute like a DIV within an anchor tag. That could cause a problem in some browsers.

Here's some code I used recently to get what I think you're looking for.

The HTML (repeat as necesary):

<div class="set"> 
<a href="bigger-image.jpg"> 
<img src="thumbnail.jpg" width="120px" height="120px" alt="Pretty picture" /><br /> 
<p>Caption for picture</p> 
</a> 
</div> 

And the CSS:

.set {float:left; width:120px; margin:15px;} 
div.set p {font-size:.6em; text-align:center; border:1px solid red;} 

[DrDoc]

block level attribute like a DIV within an anchor tag

...which also rules out all other block level elements, like the paragraph in your example ;)
The best solution is to use a <span>. Then style it display:block if you need to.

[photon]

Oops, sure enough. A case of "do as I say, not as I do". :)

<span>

is the way to go.