h# next to a float help

[ryan.od]

I'm trying to figure out how to set up the following:

 

 

Product Title                                                            Image

-------------------------------------------------------------

 

I'm trying to float the image to the right, but I cannot get both to sit on the underline (which is applied to the h# on the left).

 

How do you use CSS to set up this situation?? I cannot use a left margin on the image because there are a bunch of products and each has a title that has a unique length.

 

Thanks,

RyanOD

[ToonMariner]

put the image before the header tag then float it right and give the header clear: none;

[ryan.od]

Yes, but the problem with that is I want the bottom of the header and the bottom of the image to align because I have a border-bottom on the header that extends across the page. Since the header and the image have different heights, the bottom border will run across the page and through the image.

 

Once I have the two pieces side by side (header on the left, image on the right), how can I insure they have bottom alignment? I have tried vertical-align, but that doesn't work.

 

Thanks for the input.

 

RyanOD

[calabiyau]

Will all the product images be of the same dimensions?

[calabiyau]

try this out:

h3
{

clear: right;
height: 20px;
border-bottom: 1px dotted black;
margin-top: -20px;



}
img
{
float: right;
}

 

<img src="your_pic.gif"/>
<h3>This is my Picture</h3>

 

Might have to play around with the heights of the h tag to get it to look right in all browsers but this looks right in IE 6 and Firefox for me.

 

EDIT...nah the negative top margin isn't working in firefox...i'll keep thinking about it.

[ToonMariner]

alternatively just give the h3 a padding-bottom big enough to fit the picture in.

[calabiyau]

try this out:

h3
{

clear: right;
margin: 0; padding: 0;
border-bottom: 1px dotted black;
position: relative;
left: 0; top: -20px;

}
img
{
float: right;
}

 

<img src="your_pic.gif"/>
<h3>This is my Picture</h3>

 

 

 

I think the above should work out.  You will have to play around with the top: 20px to whatever makes it slide into place cross browser.  Also since it is position relative, it still takes up the space it was moved from so there will be a 20px gap between each row, but you would probably want some space between rows anyway.

[soycharliente]

You can align text with the bottom of an image using CSS.

 

Check out this page: http://www.bigbaer.com/css_tutorials/css.vertical.align.image.styles.htm

 

They don't supply any code, so you'll have to look at the source code and CSS yourself. But look at the examples and it's all there.