4 replies to this topic

[qwerty]

If I set an image to float:left, but I want a text caption right under it, does that mean I need to put both elements into a div and set that to float:left?

[chrishirst]

setting set float:left and clear:right on the image container

post code, it's easier than explaining

CODE

CSS

<style type="text/css">
.image_block {
    position:relative;
    width:150px;
    float:left;
    margin:0px 10px 10px 0px;
}
.image {
    position:relative;
    float:left;
    clear:right;
}
.caption {
    float:left;
    width:100%;
    text-align:center;
}
</style>

HTML

   <div class="image_block">
     <div class="image">
       <img src="/images/image.gif">
       <div class="caption">
         This is a caption
       </div>
     </div>
   </div>
This text will wrap itself around the image

(I will get all this finished soon !!!)

[qwerty]

Many thanks

I had to do two versions, one to float left and the other right, but that worked nicely.

[lyn]

This is great Chris!

If I wanted to define this kind of image block in a CSS file so I could apply it to different sized images, would I be able to spec the width of the block in the html page?

L.

[chrishirst]

sure, all you would need is to redefine the width parameter in the inpage style

CODE

.image_block {
width:150px;
}

or as an alternative you can create some width classes in your CSS file and combine them.

CODE

.w_100 {
width:100px;
}
.w_150 {
width:150px;
}
.w_200 {
width:200px;
}

<div class="image_block w_200"><img ...></div>

both methods have their own merits depending on your particular requirements.