Float Button

I got a translate button from http://translateth.is for my squarespace site. www.puertacielocr.com

I would like the button to float above header image on the top right side of the screen. Right now it pushes the website down and makes a white bar across the top (ugly).

Any Ideas?


<!-- Begin TranslateThis Button -->

<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

<!-- End TranslateThis Button -->
bdelatteAsked:
Who is Participating?
 
jtwcsConnect With a Mentor Commented:
You can float the wrapper div, translate-this, to the right using the following declaration.

#translate-this {
     float: right;
}
0
 
Julian HansenCommented:
Try this - put your button into the same container as your header - I will assume for the example below something like this
<div id="header">
  <div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
  TranslateThis();
</script>
</div>

Open in new window

Then add this styling
<style type="text/css">
#header {
  position: relative;
  z-index: 1;
}
#translate-this {
  position: absolute;
  top: 10px; /* Modify depending on where you want it to go */
  right: 10px; /* Modify depending on where you want it to go */
  z-index: 100;
</style>

Open in new window


Position absolute gives you much greater control for positioning an element exactly where you want it than using float.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.