HTML - Docked element

Question

I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]

Can you post an example or two? what css is needed for this? (if it's needed)

unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)

But I will post an image as soon as possible.

Answer 1

You should apply position: fixed to this box.

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled.

Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp

---

Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/

You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)