Any HTML/CSS pros here?
I have an element with position: fixed, so it stays in the same place when you scroll. However, it also stays in the same place (relative to browser) when you scroll horizontally, and I want it to stay in the same place, relative to the parent element.
I can’t seem to find how to do this without using javascript. Any help?
edit: title should have been only vertical :retard:
No nice way to do this with straight CSS. I believe you could hack something together with a 100% wide parent element that has a fixed position, where your child element then has a specific position within that parent. (And this is where it really sucks to care about both design and technical stuff, because I for one cannot do that without contemplating ritual suicide).
For this kind of trick, you may consider using Javascript with a reasonable fallback when Javascript is absent. (Eg: do it if it’s handy, otherwise just be tidy and don’t do anything special). position:fixed can do all kinds of horrible things and it should be avoided unless it really, really makes sense.
Fairly easy to do on a basic level. Here’s a jQuery plugin that does it well:
https://plugins.jquery.com/project/scroll-follow
And my version of the plugin, which removes a bunch of stuff (including animations) for simplicity:
https://bazaar.launchpad.net/~harvest-dev/harvest/trunk/annotate/head:/harvest/media/js/jquery.scrollstay.js
You might need to modify that a little for your own uses.
A nice thing over the CSS solution is this knows to never move the element if it is larger than the browser window. Using position:fixed for a large image, for example, you end up with your interface fighting against users who want to scroll down and see the bottom of that image. With Javascript, we can be a lot cleverer and only kick in when the behaviour is helpful. And those without Javascript just suffer accordingly :b
(Well, they get the more minimal experience they prefer)
If I understand correctly, you want something to stay in a fixed position relative to the browser? Like a
This can be done with the CSS position:fixed attribute. It makes the object always appear in a position relative to the browser window, independent of scrolling or window resizing.
Although I admire javascript, CSS is much simpler and doing it all in CSS will help you if you need to create a new CSS rule for showing your page in other devices.
I don’t remember how to code it completely from scratch, but if you use Dreamweaver, then just Create a new CSS rule to apply to a specific identifier (e.g. #NavBox) and set the Position:Fixed attribute and enter your settings. (e.g. top: 50px, right 50px).
This should do.
I’m confused.
If you want the element to be fixed on the screen regardless of whether you scroll up or down, you would simply use position:fixed and if you want it on top of everything else, use an appropriate z-index. If you want it, say, 50px from the left, margin-left:50px and, depending on your element, you might want to go ahead and put a padding-left:0px on there as well to make sure that you don’t have any extraneous padding on that side.
I’m not sure your goal here, to be honest.
I find that you generally get much better answers from people when you describe the problem you’re having, rather than the solution you’re looking for. This opens the door for people to get creative and provide solutions you’d never even consider. 
If you describe the solution you want, you’re asking people to apply their knowledge. If you describe the problem you’re having, you’re asking people to apply their knowledge and creativity.
My $0,02.
Seems Picklesworth is the only one who understood my post (though that’s probably my own fault). But thanks for the responses everyone
Picklesworth, that’s exactly what I thought, but I thought I’d ask anyway. Problem is, I don’t have a server yet so I can’t implement javascript at the moment.
I’ll try again for those confused though:
Currently, the element has position: fixed. This causes it to be at a fixed position relative to the browser window, both horizontally and vertically. What I want is for it to be fixed relative to the browser vertically, and relative to a parent element (fixed: absolute) horizontally, so it stays in the same place on the page, but always at the bottom of the window.
Doesn’t appear to be possible with only CSS though.
My code is this (in essence) at the moment:
#parent {
position: relative;
}
#fixed {
position: fixed;
bottom: 50px;
}What I want is something like adding
position: absolute;
left: 50px;to #fixed, but obviously that doesn’t work.
Edit: I also tried your suicidal fix (workaround), Picklesworth, but it seems that fixed elements with 100% width take up 100% of the browser window, and not the page, because it still doesn’t work :3
Allow me to enrage you further by misunderstanding (I am Greek and my technical vocabulary is somewhat crippled).
You want something to have a specific, content independant distance from the top of the browser window, but follow normal document flow as to it’s horizontal position?
I still can’t imagine why if not for the sake of itself. Maybe you should give an example?
Anyway.
Make sure you explicitly give it’s box dimensions. (We don’t want them auto or inherited through the cascade).
I don’t have dreamweaver here with me, and I am on vacation. While Black Mesa can go have gay sexytime, I felt your anguish over stupid CSS rules, and thought I would try and help!
I still don’t get what you’re actually trying to accomplish. If you want an element fixed to the bottom of a page, but a little from the left, you can accomplish that with the positioning and margin CSS parameters.
Probably something like:#fixed {
position: absolute; left: 50px; top: 100%; height: 20px; margin-top: -20px;
}
Not a problem. Javascript is run locally on the browser - not on the server. If you want to use JSP (Java Server Pages), ASP or PHP you’ll need a server. These are script languages that run -before- the browser receives the webpage. Very handy, but not usable for modifying the layout of the website -after- the browser has loaded the webpage. You need javascript for that, which runs fine from a HTML file saved on your local computer.
The element I’m talking about is a small navigation menu.
I want it at the bottom of the page (due to the nature of the design). However, if the page is longer than the height of the browser window (i.e. when there’s a vertical scroll bar), the navigation menu will not be visible until you scroll down, and I want it visible at all times. That’s where a fixed position comes in.
The page is also rather wide (which is part of the design), so on smaller screens there will probably be a horizontal scrollbar. When using a fixed position, the menu will stay in the same place relative to the browser when you scroll horizontally (i.e. it moves on the page).
In other words, I don’t want it fixed on the bottom of the page, but on the bottom of the window. Vertically. Horizontally I want it fixed on the page.
I don’t know how to put it any clearer than that
I didn’t realize that about javascript, I’ll try it out. Thanks.
What you want is to constantly re-position the element at the bottom of the current browser view (not necessarily the bottom of the page), each time the page is scrolled. Correct?
I’m quite sure CSS alone isn’t going to help you with this one. CSS positions elements relative/fixed/absolute on the page, not on the browser window. Also, because CSS in itself positions things on a page once, it won’t re-adjust the position of an element later on (when you scroll, for example).
The best way to do this would indeed be the javascript way. I could write some code here, or an explanation, but Google seems to have the subject covered quite well: https://www.google.nl/search?q=javascript+bottom+bar
I know it’s a bit cheap of me to give a Google search link, but you will find your answers there - probably even copy-paste-ready scripts. Post back if you need more help.
jQuery way, place the footer in a container with width 100%, height whatever, overflow hidden, and fixed to the bottom of the screen. Then using the .scroll() window event bind window.pageXOffset to the .scrollLeft() value of the footer div.
#NavBox
{
position:fixed;
bottom: -1px;
margin-left:50%
}
This (without any errors and some tweaking) will do exactly what you want. It will stick the
This should have the effect of the FaceBook chat bar thing on the bottom of facebook pages. It is always at the bottom of the window and always on top of content, independent of you much you scroll vertically.
EDIT: You could also keep the width to 100% and be done with the margin. Just remember to use padding so you don’t end up with a left-to-right status bar; unless it’s what you want.
If this doesn’t do, then be kind enough to post simple HTML with the css in page so we can take a look.
See, I learn something new everyday. I had no idea that would work. In fact, I didn’t even know position ‘fixed’ existed. I like it!
I wasn’t able to reproduce what Burbinator wants with your code, but the following code did get me there:
[code]
html, body { height: 100%; margin: 0px; } #navbar { position: fixed; width: 100%; height: 20px; left: 0px; bottom: 0px; background-color: red; } [/code]Very nice and clean solution, GConstantine. :-)I mentioned the fixed position repeatedly though 
Unfortunately, my nav menu is only about 100px wide, so I don’t think that’ll work either, but I’ll try it out anyway as soon as I have time.
If it doesn’t work I’ll mess around with javascript and see if I can get it to work, starting with FireTime’s suggestion as that seems to be the simplest way I’ve seen so far.
For now I’ve simply placed it at the top of the content part of the page.
Thanks guys!
Edit: nope, css solution still doesn’t work, since with a fixed element, 100% width means 100% of the browser, and not of the page, as I discovered earlier.
I’ll have to try JS if I want to get this to work.
Right. You should be able to remedy this by setting a left of 50% of the page (so the element starts in the middle of the page) and then setting a margin-left of 50% of the element width (so half of the element appears left of the middle of the page, putting it in the horizontal middle.
The code then becomes:[code]
html, body { height: 100%; margin: 0px; } #navbar { position: fixed; width: 100px; height: 20px; left: 50%; bottom: 0px; margin-left: -50px; background-color: red; } [/code]My apologies for not getting the ‘fixed position’ earlier. I thought you meant ‘absolute position’ by that (since that’s also a fixed position, just relative to the page rather than the browser window). Like I said, I hadn’t heard about the ‘fixed’ value for ‘position’ before today.
Again, that doesn’t work because with a fixed position, it uses a percentage of the browser window, and not of the entire page. I tried it to confirm, and I got the results I expected. Unless I’m not quite getting what you mean of course.
And no problem, I just thought it was amusing. No offence meant
Thanks anyway though.
I’ll post my exact (relevant) code to be sure though (but I should stress again that any percentage within a fixed element is a percentage of the window and not the page):
HTML:
<link href="opmaak.css" rel="stylesheet" type="text/css">
<body>
<div id="bg"><div id="nav"><div id="word"><a href="word.html"></a></div></div></div>
</body>CSS before:
body {
margin: 0;
width: 100%;
height: 100%;
}
#bg {
position: relative;
margin: 0 auto;
width: 1200px;
min-height: 100%;
}
#nav {
position: absolute;
top: 193px;
}
#word {
position: absolute;
left: 170px;
}
#word a {
position: absolute;
width: 60px;
height: 55px;
background-image: url('images/word.jpg');
}CSS after (#nav only):
#nav {
position: fixed;
bottom: 0px; left: 50%;
width: 250px; height: 150px;
margin-left: -125px;
}(there are four elements in total inside nav, with roughly the same code as #word, and the element is a bit wider than I had estimated )
I think I’m finally starting to actually get it, after reading the thread again properly. Blame it on the new year’s eve related headache I have today. Not what you think though, I worked all days and most of the night - haven’t slept much.
I did a quick Google search for you again, it seems that there is someone who ran into the exact same problem, but luckily for you, he managed to overcome it.
Do I finally get my cookie now?
Hehe, not a problem.
Damn, I must suck at google searches. I wish I wasn’t such a novice at javascript though, I can’t figure out right away how to implement the plugins required in that link, and I’ve got exams coming up so I can’t spend a lot of time on it at the moment 
I’m giving you 10 cookies in advance for finding that link though!
Also still waiting for a reply from FireTime to my PM, since his solution would be quite a bit simpler provided that it works.
Thanks a bunch
Implementing the plugins is a matter of linking to the javascripts from your html file.
For Mootools:[code]
[/code]For the ScrollSpy plugin it becomes a little bit more difficult, but not by much. You’ll have to download the .js file to a directory relative to the one the html file is in (or simply in the same directory) and then link to that as well, the same way as shown above. Only the name of the script file in place of the URL. Something like:[code]
[/code]Good luck on your exams; make us proud… 
FULL CODE with comments and a break down of jquery command
BASIC CODE↓ [/SIZE]
[code]
#footwrap { background-color:#003366; position:fixed; width:100%; height:100px; bottom:0px; left:0; overflow:hidden; } #foot{ width:1000px; background-color:#ff0000; }___________________________________________________________________________________________________________________________
<script>
$(window).scroll(function () {
$("#footwrap").scrollLeft(window.pageXOffset);
});
</script>
Both codes are copy paste ready and will run from a HTML file on your desktop.
EDIT: server is up as well https://firetime.dyndns.org/scroll.html
Also if you want to hide the footer when at the top of the page thats just another quick check to see if the window.pageYOffset == 0
Founded in 2004, Leakfree.org became one of the first online communities dedicated to Valve’s Source engine development. It is more famously known for the formation of Black Mesa: Source under the 'Leakfree Modification Team' handle in September 2004.