Fixed floating aside on the right
Multi tool use
Fixed floating aside on the right
I have a situation like this :
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper { width: 1100px; margin: 0px auto; }
#wrapper #stream { width: 790px; float: left; border: 1px solid red; }
#wrapper aside { width: 270px; float: left; border: 1px solid red; }
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>
and i want that the sidebar doesn't move even if the page scrolls down.
I tried setting the aside's position to fixed but so I can't set properly the distance from left.
I found a solution whith jquery
$(document).ready(function () {
$(window).scroll(function () {
$("aside").css('top', $(window).scrollTop()+'px');
});
})
but with chrome and safari the scroll of the aside is piecewise.
Any help?
========================
SOLUTION:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<style>
#wrapper {
width: 1100px;
margin: 0px auto;
}
#stream {
width: 800px;
background: #ccc;
float: left;
}
#sidebar {
float: left;
border: 1px solid red;
width: 200px;
}
aside {
position: fixed;
top: 20px;
border: 1px solid red;
}
</style>
<body>
<section id="wrapper">
<section id="stream">
some text...
</section>
<section id="sidebar">
<aside>
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</aside>
</section>
</body>
</html>
Thanks to all!
If you have problem with setting proper distance from left, just don;t set it. Ithink it might be similar to this example.
– nd_macias
Mar 22 '13 at 8:33
1 Answer
1
In order to use the top, right, bottom or left properties, you have to set the object's display property to absolute, relative or fixed.
top
right
bottom
left
display
absolute
relative
fixed
Either way, by setting position: fixed; it won't move when you scroll.
position: fixed;
I think that setting
position: fixed will move element when scrolling.– nd_macias
Mar 22 '13 at 8:30
position: fixed
Thanks to nd_macias I've found a simple solution that works for me! I have added it to the question.
– Gnamm
Mar 22 '13 at 9:19
@nd_macias uuhhm... no.
position: fixed will fix an element on the screen. position: absolute will allow you to set an element relative from it's parent, and position: relative sets an element relative from it's current position.– Tim S.
Mar 22 '13 at 9:59
position: fixed
position: absolute
position: relative
Check out this fiddle.
– Tim S.
Mar 22 '13 at 10:03
@Tim S. Ok, I guess there's a bit of misunderstanding, because that is exactly what I mean by "it will move", although I meant "it will move relatively to other elements". :)
– nd_macias
Mar 22 '13 at 10:05
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I'm a little confused as to why the fixed position didn't work? Can you show the CSS you tried and tell us why you didn't get it to work? (Note that you can edit your question to add details.)
– Jeroen
Mar 22 '13 at 8:28