CSS: Aligning/Justify Text to images.. help! Thnks!

[Deek Fracott]

I am working on a project for a real estate agent found here.

The issue I am having is with the CSS-Controlled database feed for a slideshow widget.

Right now, it looks like this:




I Would like it to look more like this (with text to the right):



Heres how the CSS for this feed works:

#IDX-slideshow

- The outermost container which wraps around the entire slideshow.

#IDX-slideshowImage

- The Div that wraps around the image that is displayed on the slideshow.

#IDX-ssImage

- Direct CSS access the the image itself.

#IDX-addressLine

- The container for the Listing Address.

#IDX-cszLine

- The container for the Listing City/State/Zip line.

#IDX-priceLine

- The container for the Listing Price.

.IDX-ssLinkText

- The class for all links that are displayed.

my CSS looks like this:

#IDX-cbtsst-slideshow {}
#IDX-cbtsst-slideshowImage {}
#IDX-cbtsst-ssImage {}
#IDX-cbtsst-priceLine { font-weight: bold; <br>
                        font-size: 30px; }
#IDX-cbtsst-addressLine { font-weight: bold; }
#IDX-cbtsst-cszLine { font-weight: bold; }

The feed element:

<script type="text/javascript" src="http://www.homeclarksville.idxco.com/idx/16065/customSlideshowJS.php?stp=basic&name=cbtsst&pt=sfr&city[]=8989&lp=100000&hp=250000&ba=0&srt=DESC&slideshowWidth=400&slideshowHeight=200&imageWidth=200&imageHeight=100&rotation=8&propCount=25&alignment=center"></script>

I know its probably something simple, but I am fried up to my eyeballs in code, and cant even say my own name straight rite now.

***Also, I'd like to NOT use absolute positioning, is that possible..? ***

Thanks ya bunch of geniuses!

[Ronald Roe]

Add float:left; to the image's CSS

[TheGAME1264]

I'd also put the three text lines into a single div and add a float: right; to it just to keep long pieces of text from spilling out under the picture.

The other thing...when you float, you must clear. Remember that, because I'm about 99% sure your next question will be based on that very premise if you don't.

[Deek Fracott]

thanks guys! that did the trick. Would there be any way to take my containers and relocate them around a webpage... like targetting the different pieces to Iframes or tables? (w/o using absolute positioning)

I'd also put the three text lines into a single div and add a float: right; to it just to keep long pieces of text from spilling out under the picture.

Probably another obvious question- how to do this?

[TheGAME1264]

The simplest way (but not the best...that's homework!)

<div style="float:  right;">
Your three text lines.
</div>

[Deek Fracott]

I actually dont have direct access to those 3 lines- this would all be simple simon if I did, they are generated by PHP (which I only have CSS control over).

<script type="text/javascript" src="http://www.homeclarksville.idxco.com/idx/16065/customSlideshowJS.php?stp=basic&name=cbtsst&pt=sfr&city[]=8989&lp=100000&hp=250000&ba=0&srt=DESC&slideshowWidth=400&slideshowHeight=200&imageWidth=200&imageHeight=100&rotation=8&propCount=25&alignment=center"></script>

is absolute position (CSS), the only way i can manipulate those 3 lines as objects?

[Ronald Roe]

Do you not have access to edit the PHP?

[TheGAME1264]

What he asked. That would be the simplest way.

Failing that, you could pull a jQuery hack whereby you create a div, add the three elements to the div, and then overwrite the elements with the filled-in div...mind you, that's a jQuery hack and more difficult in this case than editing the PHP.