HTML Image alignment help

How about putting them both in a two-cell table?

Hmm. I guess that might work, if I knew how to do tables. :-) I think I could probably figure them out though. I'll look into it.

Any more ideas?

I think what you want to do is create some CSS entries for the img tag that have a float:right declaration.

Then in the HTML for the image assign that css to them.

CSS is probably why they previewed differently than they publish - your site uses a different CSS sheet than the MT entry interface.

Google around a bit for "CSS, FLoat, and IMG" - you should find the help you need.

Thanks for the input. I've already got this in my CSS:

.blogbody img {
float:right;
border-left:15px solid #FFF
}

I tried enclosing both IMG tags in one DIV that refered to a new class called "IMG". This is the CSS for the IMG class:

.img {
float:right
}

If you wrap each of the img tags in a [div align="left"] it displays in firefox with the images on the right, one on top of the other, and text on the left. But in Internet Explorer it looks like the original. Perhaps its an IE bug.

Rob,

That might be because you're giving the browser conflicting instructions. The CSS tells it to float:right (see my comment right after boyink's above) and your div tells it to align="left". Perhaps IE and FF interpret the conflict differently.

If you meant [div align="right"], I've tried that and it doesn't change the results.

Just checking back on this...

Have you tried creating a specific class for the images, rather than the catch-all rule?

There's a whole "inheritance" model at work (that I barely understand..), and there might be other rules being applied to the images after your blogbody one.

Boyink,

Yeah, I think I did, see my coment from the 13th above. What's the difference between CSS entries that start with '#' and the ones that start with '.'? My blog entry text is within 3 DIV tags. There's this:

#content {
position:absolute;
z-index: 1;
background:#FFF;
padding-right:200px;
padding-left:200px;
margin-bottom:20px;
border:1px solid #FFF;
}

.blog {
padding:15px;
background:#FFF;
}

.blogbody {
text-align:justify;
font-family:georgia, verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:150%;
}

My CSS is mostly straight out of MT, with some tweaks.

OK, here's what I did.

Don't ask me to explain..:) (I think it might have to do with the fact that your img html was wrapped in [p] tags, and since there was no css declaration for images in [p] tags it wasn't floating them right. Not sure. I generally muck around with CSS in TopStyle Pro until it seems to work, but don't always understand it).

In the CSS I created:
img.cars{
padding-bottom: 10px;
padding-left: 10px;
float: right;
}

Then in the html, modified the image code to:

The images appear to float right in both IE and Firefox, but I noted that IE doesn't start the text until the second image.

I also note that your HTML doesn't validate, these image tags aren't closed, but not sure if that's affecting things.

Dangit...trying to post code then the browser interprets.

The Images are wrapped in [p] tags.

The edited HTML for the images is:
[img class="cars" src="salguod_net Time to Get The Old 'Bird Out_files/2005-04-09_tbird-sm.jpg" /]

[img class="cars" src="salguod_net Time to Get The Old 'Bird Out_files/2005-04-09_tbird-key-locker-sm.jpg" /]

I fixed your tags in your comments. I just subbed '[]' for the '>'. The [img] tags in the first one get wiped though.

The [p] tags were added in by MT, I didn't know that they were there until I looked at the source of the entry. I think I can tell MT not to do that on the entry page, I'll look into it.

Well, I was able to take the [p] tags out by unselecting the 'convert line breaks' option for the entry, but it just merged all my text together and didn't change the images at all. So the [p] tags weren't the culprit. I'm going to try adding in the 'padding' lines to my blogbbody img CSS entry.

OK, tried every combination of what I thought you said and I get the same results. I added that 'img.cars' section to my CSS, wrapped each [img] tag in it's own [p] tag and added the class="cars" to each [img] tag. I tried with and without the extra [p] tags around the [img] tags, with and without my original blogbody.img CSS entry, I tried modifying my original CSS entry to match yours and tried using your entry without the '.cars' to see if it would apply to all [img] tags.

I still get two images in line, not one over the other. Phoey. :-(

One break tag between the images?

I've tried in various iterations adding in a [br] between the [img] tags. All I managed to do was move the left image (the second one listed in the HTML) down the equivalent of one text line.

I think I give up. I think I need a course in CSS. Thanks for your help anyway folks.

Try this code, replacing the brackets with the appropriate html '>' symbols. You can alter the border thickness and color if you wish. Sorry it took me so long to get back to you with this.

[TABLE BORDER=1 BORDERCOLOR=FFFFFF WIDTH=50% ALIGN=RIGHT]
[TR] [TD]image1url[/TD] [/TR]
[TR] [TD]image2url[/TD] [/TR]
[/TABLE]

OK, I finally got around to trying your table suggestion, doc, minus the 'width' argument. It's almost what I want, basically close enough. I'd prefer the text to follow the narrower second image, but oh well.

Why is this so hard?