Get google element to stay on its own line

HTML & CSS
1

Hi - does anyone know how I can add a google translate box at the top right of this page:

Automatic Sprouter: GoGreen Sprouter Better than EasyGreen and Freshlife Sprouters

I want it to float above the current .toprgt elements, like this:

.translate {float:right; margin-right:15px}

then the html would be:

<div class=“translate”>
<div id=“google_translate_element”></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘en’,
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, ‘google_translate_element’);
}
</script><script src=“//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>
</div>

taken from this page:

Tools - Google Translate

BUT the moment I do that - and clear it in the next line (namely, in .toprgt and .logosm) then all hell breaks loose.

Does anyone know how I can get that google script to stay in its own box in its own line, floated at the top right of the page?

Besides clearing it in .toprgt (and .logosm although it shouldn’t need to clear since it’s floating left) I’ve also tried

<div class=“translate clearfix”>

but it doesn’t work.

Google doesn’t give access to the script to see what it’s doing.

I’m wondering if it’s even worth sticking a translate choice in there? Surely those people who need to translate pages have installed the google translate button into their web browser?

It seems to me the whole thing just slows down the page loading time especially on mobiles.

thanks, Val

2

try clear left on class logosm

3

Have you looked at the code in the mockup frame they provide? There, the translate div is floated right in the h1, being the first element.

Floated elements should come first in the mark up.


<h1 style="border-bottom: 1px solid rgb(102, 136, 204); padding-bottom: 5px; vertical-align: middle; overflow: hidden;">

<div [b]style="float: right; font-weight: normal;"[/b]>
<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" style="">
<div id=":1.targetLanguage"><select class="goog-te-combo"><option value="">Select Language</option></select></div>Powered by <span style="white-space: nowrap;"><a target="_blank" href="http://translate.google.com" class="goog-logo-link"><img src="http://translate.googleapis.com/translate_static/img/mini_google.png">Translate</a></span></div></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>

Your Fancy Web Site
</h1>
4

Hi noonnope - thank you! That works when I put the translate div inside a clearfix div (instead of inside an h1)

So this did not work:

<div class=“translate clearfix”>

but this works:

<div class=“clearfix”> [ or as you point out <h1> ]
<div class=“translate”></div>
</div> [ or </h1> ]

I left out the overflow:hidden. Hope that’s ok…