Having trouble getting a button to stick to the bottom….

Sticky things need to be outside elements, in general. Say div.fixed is within div.absolute within div.relative – could be done right, but it might produce weird results. First of all, let’s take a look at your markup.

.back-to-top {
	position: fixed; /* Make it sticky */

	left: 0px;
        bottom: 0px;

	display: block; /* Divs are by default in block */

	font-size: 45px;
	height: 110px;
	width: 110px;
	line-height: 1;
	padding-top: 25px;
        /* Not quite sure how you want to style it */

	text-align: center;

	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border-width: 5px;
	border-style: solid;

        /* 100% border radius also works */

        z-index: 99999; /* Making sure it stays on top */

        cursor: pointer; /* Buttons made perfect */
}

You need a fixed position in order to make the div “sticky”. Remove my comments and adjust accordingly. Would be nice to see a sample if you want extra styling tips!

Now, since our .back-to-top depends on nothing else other than the body of the website – because it is fixed – we should make sure it is standing alone. Preferably, I would place it just before the closing tag </body>, as follows:

...content

  <!-- Back to Top -->
  <div class="back-to-top"></div>
</body>

Hope this helps!

George I really appreciate the help, the div is kind of weird for the <!– Back to Top –>. I did put the CSS code in and it actually made it stick but, I’m not completely sure that’s how I want it yet… If you have any other pointers the site is essfunctions.com/wordpress I’d love some more input. I’m slowly getting this down but, the only background I have in any type of coding is writing code for my nephews minecraft server. lol. Thanks again for the reply.

I’m sorry but as you appear to be using a commercial theme, you need to seek support from the theme’s developer/vendor. We do not have access to, nor do we support, commercial products here.

Well, I apologize for posting my question here.

No problem stiggz, I am happy to help. I can give you a general outline with comments to help you personally style the button.

First things first, comments in CSS are styled:

/* Place comment */

within HTML, comments can be inserted like this:

<!-- Place comment -->

We got that fixed part going on. So let’s look at the CSS first and what you can do with it. Generally, you can replace <div> with <button> for buttons but that’s a different aspect which is not necessary. Using <div> is just the same thing and works perfectly.

I see you’re using FontAwesome icons, which I think are awesome. Anyone reading this should consider using them, eventually. ??

You can always remove my comments before copying the following:

.back-to-top {

        position: fixed; /* Make it sticky */

	left: 25px; /* This defines the distance from the left edge of the browser. You can define it in pixels or percentage, or just leave it zero. In our case, we don't want it to touch the edge. */

        bottom: 25px; /* Same goes for this */

	font-size: 46px; /* Defining arrow's size. */

	height: 50px;
	width: 50px;

	text-align: center; /* We want the arrow in the middle, depending on left and right. */

        padding: 2px 0; /* We will now handle top and bottom. The arrow's size is 46px, while the height of the div is 50px. So basically we want equal distances between top and bottom, so our arrow can stay in the middle. 50px - 46px = 4px / 2 */

        /* You can do padding-top, padding-right etc or
        padding: top right bottom left; */

        color: #000; /* Set the color of the text/arrow */
        background: #fff; /* Set the color of the div */

	-webkit-border-radius: 100%; /* Chrome */
	-moz-border-radius: 100%; /* Firefox */
        border-radius: 100%;

        /* We set it to 100% to make it a circle */

	border-width: 5px; /* Define the width of the border */
	border-style: solid;/* Define the style of the border. It can be solid, dashed or dotted */

        border-color: /* The border's color */

        z-index: 99999; /* Making sure it stays on top. So for example, a div with z-index: 99998; will be under our button in terms of "depth". */
        cursor: pointer; /* The cursor becomes a pointer when there is a link. If you don't have a link but still want the cursor to become a pointer, use this. */
}

Style accordingly for .back-to-top:hover {}.

Learning code means constant experimentation, so don’t be afraid to tinker away. I suggest removing my endless comments at some point. Experiment at your hearts content until you have the right style! The possibilities are truly endless.

Hope I’m helping!

Thank you George! That was more than enough information and very helpful. I believe I’ll leave the comments for future reference. I find myself looking into the “Inspect Elements” window all the time nowadays and just getting a idea of house elements are laidout and it has been very helpful as well. I thank you for taking the time to give me some pointers.

No problem at all, stiggz.

George this is probably a stupid question, If there is lines on the webpage, are those just borders for certain elements?

What do you mean by lines?