float right

[gabrielebr]

Hello,I have an image that floats left but it stays completely to the right while I would like it stays near to the text.(you can see what I mean here: http://www.farchemia.it/prova/index.php?bg=introd) I wrote the following code in the HTML:<div style= "text-align:left;width:95%;color:#010080;background:#FFFFFF;padding-top:20px;padding-bottom:5px;font-size:1em;font-family: Verdana, Arial,Helvetica, sans-serif"><br /><img src="ovale1.jpg" class="floatimgright" alt="photo1" /> The company was founded in 1962 and since 1989 belongs to the Belgian group <A HREF="http://www.tessenderlo.com">Tessenderlo Chemie.</a><br /> <br />The factory and offices are located in Treviglio, 15 Km south of Bergamo and 40 Km east of Milano<br/> <br />Farchemia manufactures pharmaceutical and veterinary intermediates and bulk products.<br/><br/>The company has modern production <A HREF="facility.htm">facilities</a>, excellent quality control, an experienced workforce and a highly qualified technical and research staff.<br /> <br />And in the CSS I wrote:img.floatimgleft{float: left;margin-bottom: 1px;margin-right: 10px;margin-top: 4px;clear: right;}How can I keep the image near the text ?Thank youGabriele

[dsonesuk]

your link is not working correctly, remove end bracket,your html code for img has class for floating right, but you supplying css for floating left?the image is doing exactly what you asked of it, to float to the right edge of its parent containner. To be beside the text you would have to enclose the text in a container, float that left, and then float the image left to be beside it.

<div style="background: rgb(255, 255, 255) none repeat scroll 0% 50%; text-align: left; width: 95%; color: rgb(1, 0, 128); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-top: 20px; padding-bottom: 5px; font-size: 1em; font-family: Verdana,Arial,Helvetica,sans-serif;"><br/><div style="float: left;"><!-- top text container --><p> The company was founded in 1962 and since 1989 belongs to the Belgian group <a href="http://www.tessenderlo.com">Tessenderlo Chemie.</a></p><p>The factory and offices are located in Treviglio, 15 Km south of Bergamo and 40 Km east of Milano</p><p>Farchemia manufactures pharmaceutical and veterinary intermediates and bulk products.</p><p>The company has modern production <a href="facility.htm">facilities</a>, excellent quality control, an experienced workforce and a highly qualified technical and research staff.</p></div> <!-- END top text container --> <img src="ovale1.jpg" class="floatimgleft" alt="photo1"/><div style="clear: both;"><!-- bottom text container --><img alt="photo2" class="floatimgleft" src="ovale2.jpg"/><p>Since 1979 the company is  inspected by the FDA, in 1996 received the UNI EN ISO 9002 certificate (# 693/2) and in 2003 the UNI EN 9001-2000 certificate (693/3). Farchemia is an associate of Federchimica</p><p>Production is carried out following all Good Manufacturing Recommendations in a modern plant with a wide range of glass and stainless steel reactors. Many kinds of <a href="reactions.htm">reactions</a> are performed.</p><p>The company gives its full attention to environmental and safety problems. </p></div><!-- END bottom text container --><br/> <div style="font-size: 1.5em; color: rgb(64, 128, 128); font-weight: bold; text-align: center;">Main figures 2010<br/></div><div style="border: 1px solid rgb(193, 191, 191); font-weight: bold; text-align: center; padding-top: 10px; margin-top: 10px; width: 70%; margin-right: auto; margin-left: auto;">Employees: 160 <br/><br/> Sales: 52 million euro <br/> <br/> Export: over 90% <br/> <br/> Production volume: 1000 ton (2500 ton including intermediates for captive use)<br/><br/> Number of export markets: 60	<a href="mappaven.html" onclick="msgWindow=window.open('mappaven.html', 'myWin', 'scrollbars,width=900,height=700,screenX=15,screenY=15,left=15,top=0'); msgWindow.focus(); return false"><img src="viewmap.png" alt="view sales details" style="border-style: none; vertical-align: middle;"/></a><br/> <br/>  </div></div>

[gabrielebr]

thank you.Probably I did something wrong: now it is even worse than before (http://www.farchemia.it/prova/index.php?bg=introd)By the way: I have also a problem with the menu. I copied it from cssplay (great site). I don't understand what I have to modify in order to have the items of the submenus to align left. Can you hlep me also for this?Thank youregardsGabriele

[dsonesuk]

1) the only problem i see is in ie7 ( what! you did not expect that, come on, its IE), try enclosing the bottom text in a div container also, separate from image.2) you have to adjust submenu UL on hover left position to allow for gap between tabs.prodrop4 *:hover ul {background:#B9D3FB none repeat scroll 0;border-color:#3A93D2;border-style:solid;border-width:0 1px 1px;height:auto;/*left:0;*/left:14px; /* amended by dsonesuk */padding:3px;top:35px;white-space:nowrap;z-index:300;}

[gabrielebr]

In fact i'm using IE7.I made the modification you suggested but nothing happens to the image on the right (still outside the right margin)I made the moficiation on the menu but still the items of the submenus don't align left.regardsgabriele

[dsonesuk]

try zeroing in the margins and padding using universal selector, and reset margins for paragraphs and headingsp {margin:0.9em 0px;}hr{margin-top:0; margin-bottom:0;}h1, h2, h3, h4, h5, h6{margin:0.9em 0;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}then use below, which will make the page similar in all browsers.

<div style="background: rgb(255, 255, 255) none repeat scroll 0%; text-align: left; width: 95%; color: rgb(1, 0, 128);padding-top: 20px; margin-bottom: 5px; font-size: 1em; font-family: Verdana,Arial,Helvetica,sans-serif; margin-left:25px; float:left;">  <div style="float: left;"><!-- top text container -->  <p> The company was founded in 1962 and since 1989 belongs to the Belgian group <a href="http://www.tessenderlo.com">Tessenderlo Chemie.</a></p>  <p>The factory and offices are located in Treviglio, 15 Km south of Bergamo and 40 Km east of Milano</p>  <p>Farchemia manufactures pharmaceutical and veterinary intermediates and bulk products.</p>  <p>The company has modern production <a href="facility.htm">facilities</a>, excellent quality control, an experienced workforce and a highly qualified technical and research staff.</p>  </div> <!-- END top text container -->  <img alt="photo1" class="floatimgleft" src="http://www.farchemia.it/prova/ovale1.jpg"/>  <div style="float:left; width:100%;"><!-- bottom text container -->  <img src="http://www.farchemia.it/prova/ovale2.jpg" class="floatimgleft" alt="photo2"/>  <div style="margin-left: 115px;"><p>Since 1979 the company is  inspected by the FDA, in 1996 received the UNI EN ISO 9002 certificate (# 693/2) and in 2003 the UNI EN 9001-2000 certificate (693/3). Farchemia is an associate of Federchimica  </p>  <p>  Production is carried out following all Good Manufacturing Recommendations in a modern plant with a wide range of glass and stainless steel reactors. Many kinds of <a href="reactions.htm">reactions</a> are performed.</p>  <p>  The company gives its full attention to environmental and safety problems. </p></div>  </div><!-- END bottom text container -->    <div style=" clear:both;font-size: 1.5em; color: rgb(64, 128, 128); font-weight: bold; text-align: center;">Main figures 2010<br/></div>  <div style="border: 1px solid rgb(193, 191, 191); font-weight: bold; text-align: center; padding-top: 10px; margin-top: 10px; width: 70%; margin-right: auto; margin-left: auto;"><p>Employees: 160</p>  <p>Sales: 52 million euro</p>  <p>Export: over 90%</p>  <p>Production volume: 1000 ton (2500 ton including intermediates for captive use)</p>  <p>Number of export markets: 60</p></div>    <div id="footer"><span style="color: rgb(1, 0, 128); text-align: left; font-family: Verdana,Arial,Helvetica,sans-serif;">  <a href="http://www.tessenderlo.com/"><img style="border-style: none;" alt="logoTC" src="logoTGpic2.gif"/></a></span></div></div>

the menu change shoould work, its the norm for positioning the submenu, did you clear the cache before loading page.

[gabrielebr]

Now the image aligns correctly !the menu is still not left-aligning the text in the submenus.Thank you for your timegabriele

[dsonesuk]

Oh! text alignment, sorry thought you were still going on about left positioning of submenu.you have to counteract the styling for the parent top menu, they have padding-left:14px, and text-align-center, So change.prodrop4 *:hover ul li {display:block;font-weight:normal;height:20px;padding-left:0;/*added by dsonesuk */position:relative;width:auto;}.prodrop4 *:hover ul {background:#B9D3FB none repeat scroll 0;border-color:#3A93D2;border-style:solid;border-width:0 1px 1px;height:auto;left:14px;padding:3px 3px 3px 0;text-align:left;/*added by dsonesuk */top:35px;white-space:nowrap;z-index:300;}

[gabrielebr]

YESsssssssssss !now it is ok !thank you very much.regardsgabriele