CSS float image and text inline with image

[ggeoff]

Hi
I have decided to use CSS for layouts. Previously I would have used tables. My problem is that I want to place images to the left and related text on the right of the images. I have used new blank paragraphs to "fill" the space between the end of text by one image to the next image below and its text. My problem is that this didn't work until I added some real content, other than   code. The blank lines did not correspond with the results when published. A full stop added in the blank line, as low visibliity content, before the text's H2 heading for the next image and text pair, works to anchor the text to the new image. Surely there is a simpler way to do this?

[-Zarah-]

Hi
I have decided to use CSS for layouts. Previously I would have used tables. My problem is that I want to place images to the left and related text on the right of the images. I have used new blank paragraphs to "fill" the space between the end of text by one image to the next image below and its text. My problem is that this didn't work until I added some real content, other than   code. The blank lines did not correspond with the results when published. A full stop added in the blank line, as low visibliity content, before the text's H2 heading for the next image and text pair, works to anchor the text to the new image. Surely there is a simpler way to do this?

Your thread is a bit confusing, but have you tried floating the image left in the css?
i usually like to put the images in their own seperate div tags and float left. the text automaticlly will go to the right when you do that.

[ggeoff]

Your thread is a bit confusing, but have you tried floating the image left in the css?
i usually like to put the images in their own seperate div tags and float left. the text automaticlly will go to the right when you do that.

Hi Zarah

Thanks, yes I am floating the images to the left using a CSS class:

img.floatleft{
	float:left;
	margin:6px 6px 6px 0px;
}

.
I have not noticed any mention of putting each image in a div but I suppose that is necessary if one wants to contain the text alongside the image.

[-Zarah-]

hi, now i understand what u are looking for.
Here is what to do.
ahum...

insert your image where ever you want,
add a class and in your css style sheet do the following

.image-class {
    float:left;
    caption-side:right;
    }

make sure to float left or right but the most important thing is the caption-side,
as this allows the text only to write on the right.

[ggeoff]

Zarah

Thanks I didn't need to try the caption-side idea but out of curiosity I did. "right" was rejected as an option by my CSS editor.

You were right putting the text in divs works. I used several <p>&nbsp;</p>s to set the spacing where there is not much text so as to keep th relevant text with the images.

Geoff

[-Zarah-]

Zarah

Thanks I didn't need to try the caption-side idea but out of curiosity I did. "right" was rejected as an option by my CSS editor.

You were right putting the text in divs works. I used several <p>&nbsp;</p>s to set the spacing where there is not much text so as to keep th relevant text with the images.

Geoff

strange it didnt except it because it is valid css. i use dreamweaver which gives all the options as you type.
you can also use

captionside-side: left
captionside-side: centre

well good luck

[ggeoff]

Hi Zarah

I'm using Expression Web 2 it definitely only has bottom, top and inherit as options when I type the element. Most of the web references I have found only refer to use of Caption-side in conjunction with tables.

Geoff

[jeffreyk16]

Try a <br clear=`all`> after the <p> tags

[ggeoff]

Try a <br clear=`all`> after the <p> tags

thanks jeffery,

I have tried your sugestion and it seems to work in IE7 In IE8 I get a massive white space appearing.

Geoff

[drjohn]

clear takes one of four values:
none (the default)
left
right
both

ALL is not an option. so the browser is guessing that you don't know how to use clear and trying something else. IE8 is more standards compliant the IE7, and may not be applying the same correction to your faulty code.

Also, it would be <br style="clear:both" >, not <br clear=`all`>

[jeffreyk16]

ggeoff,

Sorry, I got cut off when doing that post. drjohn is right about using css clear -- the <br clear=all> was deprecated in html 4. You said you are using css, and the css clear has superseded the old html technique.

http://www.w3.org/TR/html4/present/graphics.html#adef-clear

http://www.w3.org/Style/Examples/007/figures

Also, be aware that not all browsers support the same values for attributes. The CSS editor may change values depending on default browser selected (at least for older browsers).

Cheers