A <div> to the right of a image

[vincent.marguerit]

Hi,

I am working on a page where there must be some text to the right of
an image.
This is how this must look like:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg

At this time I could have done this:
http://boxfly.free.fr/tmp/photo_preview/photo.html

To the right of the picture, I don't find a way to display the part of
the text with the grey background.

Does anyone know how to do this with <div> ?

Thanks,
Vincent.

 

[rf]

Hi,

I am working on a page where there must be some text to the right of
an image.
This is how this must look like:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg
404.

At this time I could have done this:
http://boxfly.free.fr/tmp/photo_preview/photo.html

To the right of the picture, I don't find a way to display the part of
the text with the grey background.

Does anyone know how to do this with <div> ?

Yes, but I don't know exactly what you want. I can't see your "must look
like".

 

[vincent.marguerit]

Yes, but I don't know exactly what you want. I can't see your "must look
like".

Sorry, I uploaded the content without the image. Now the picture is on
the server:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg

Vincent.

 

[rf]

Hi,

I am working on a page where there must be some text to the right of
an image.
This is how this must look like:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg

At this time I could have done this:
http://boxfly.free.fr/tmp/photo_preview/photo.html

To the right of the picture, I don't find a way to display the part of
the text with the grey background.

Does anyone know how to do this with <div> ?

Float the image left. If you want the nice borders then enclose the image in
a div, floated left, and style the div to taste.

Don't use absolute positioning, as in your latest incarnation. It *will*
break when somebody changes font size or something.

Also, don't try to make the font size 75% of what I like or I *will*
increase my font size. Your CSS is way too complex as well. You don't need
to specify all those default properties.

 

[Bernhard Sturm]

Sorry, I uploaded the content without the image. Now the picture is on
the server:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg

just an OT rant: the unit 'dpi' is meaningless for digital images. A
pixel is a pixel and the only unit that will tell me something about the
size of the image. Or have you ever seen that a digital-camera is being
advertised as producing '300dpi' images? The amount of pixels on a
CCD-sensor is measured in MP.

bernhard

 

[vincent.marguerit]

Float the image left. If you want the nice borders then enclose the image in
a div, floated left, and style the div to taste.

Don't use absolute positioning, as in your latest incarnation. It *will*
break when somebody changes font size or something.

Also, don't try to make the font size 75% of what I like or I *will*
increase my font size. Your CSS is way too complex as well. You don't need
to specify all those default properties.

Sorry man but I didn't really understand
What is taste ?

The code we are talking about is:

<div style="padding: 14px;">
<div class="preview-photo-left">
<img src="photo_files/photo_demo.jpg" border="1">

</div>
<div class="preview-photo-download">
<b>Download Image</b>
</div>

With this CSS:
..preview-photo-left{
float: left;
padding: 0;
padding-left:16px; padding-top:18px;
width:50%;
}


..preview-photo-download{
float: left;
padding: 0;
padding-left:16px; padding-top:18px;
width:50%;
background-color: #cccccc;
}


Thanks,
Vincent.

 

[Bergamot]

This is how this must look like:
http://boxfly.free.fr/tmp/photo_preview/photo_border.jpg

At this time I could have done this:
http://boxfly.free.fr/tmp/photo_preview/photo.html

Why are you floating *everything*? Just float the image left. Then
everything else will position itself to its right and wrap around it.
And don't clear floats unless you *want* the cleared element to flow
under the float instead of beside it.

See also: http://brainjar.com/css/positioning/