Problem on text align

[stonda]

I have a problem to align text and images. On this page, the product is out of stock :http://www.supreme.fr/acatalog/Promo10.html.
I would like to get the icon for the zoom and the word "Réapprovisionnement" (Out of stock), on the same line. And there is a difference. If I replace the word "Réapprovisionnement" with an image, the image is under the icon for the zoom.
I don't see where does the problem come from ?
Here is the code :
<actinic:block if="%3cactinic%3avariable%20name%3d%22URL%22%20%2f%3e%20%20%21%3d%20%22%22" >
<a class="loupe" href="javascript:ShowPopUp('<actinic:variable name="URL" />', <actinic:variable name="POPWIDTH" />, <actinic:variable name="POPHEIGHT" />);"><img src="loupe.gif" alt="Agrandir" /></a>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
<actinic:variable name="AddToCartButton" value="Supreme Add To Cart Button Image" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
<div style="float: right;"><span class="actrequired"><actinic:variable name="OutOfStock" /></span></div>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceRaw%22%20%2f%3e%3e%2281%22" >
<br/><a href="javascript:ShowPopUp('http://www.supreme.fr/4fois.html',530,500);" class="fois">PAYEZ EN PLUSIEURS FOIS SANS FRAIS</a>
</actinic:block>

[completerookie]

I may be wrong, but check the <div> surrounding the "out of stock"</div>
change that to a <span></span>
by definition, <div>'s will automatically start a new line (they are "block elements") <span>'s on the other hand do NOT start new lines. (they are "inline elements")

alternative to this is to re-define the <div> and add a "block:inline;" defintion to it - although tis is not normal

the other thing, is that the "floating" of the "out of stock" needs to be BEFORE the other bits of output, the browser then "floats" the out-of stock to the right and then the other bits of text flows around the floating object.

think of "Float:????" definitions as pieces of foam floating in a swimming pool, throw those floating bits in first, and "let them float to the edge of the pool" and then throw the other bits in and watch them fill up the remaining space

[stonda]

Thanks Kevin, I replace the <div> by <span>, take off the "float" and it is perfect. It's great !

[stonda]

Hi Kevin
What is the best way to learn subtilities of html : I am not a professionnal, and need to understand some bases, to be able to find solution alone.

[completerookie]

wow... what a question !
one of the places that you may start is TIZAG
they don't go too deep, too quickly - they cover html, css, javascript, php . . .
another absolutely fantastic place to look (can't rate him enough) for css is CSS Play
they they just give examples of what is possible with a bit of playing
the harder part of learning is converting ideas into things / methods that actinic can do.

inside actinic, look at php, you can do complex things behind the scenes but only show the generated code. again tizag has some basic tutorials, once you have the basis, then start to look more into google.

lastly, don't be afraid of asking a question here, search the forum first (else you may upset others) for a possible solution. - there is a lot of knowledgable people here. try out ideas first, people like people who have tried and then became stuck

[stonda]

Thank you Kevin for the links and for advices. It will help me in the future.