I'm trying to create a sticky searchbox so that it's always at the top of the page when you scroll.
However, I'd like it to take up 100% of the container, not the window.
Here's an HTML markup example:
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
and the CSS:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
overflow-x: hidden;
}
.searchbox {
background-color: red;
position: fixed;
width: 100%;
}
Here's a fiddle with what's currently happening: http://jsfiddle.net/09ynr879/
I'd like it to be indented on the right side by the same amount it already is on the left. Any way to fix this? I'd like to be evenly in the center with the same margins on the left and on the right.
Thanks in advance.
Here's a screenshot of the actual site where we're having the problem:
http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png
Notice how the searchbox starts at the right place but ends at the end of the page, not at the end of the container. We're using Bootstrap 3.2
Elements that are position: fixed have no relative parents. They are always going to be fixed relative to the page.
If it's no problem to you, remove position: fixed; from .searchbox and add it to .container
It's not possible, the fixed position get's out of the flow.
But an alternative solution:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
position: fixed;
}
.searchbox {
background-color: red;
width: 100%;
}
http://jsfiddle.net/09ynr879/4/
Position fixed is always of the entire window. If you want to do it for just a container, you need JavaScript.
I think what you are looking for is either:
StickyMojo or jQuery Stickem
Bootstrap has a similar thing, called Affix.
Related
Problem: When you make a certain div's position fixed (often used as a side bar, or side menu kind of stuff), and if you continue scrolling down, the div overlaps with the footer.
body {
margin: 0;
}
#header {
width: 100%;
height: 290px;
background-color: #07CB6F;
}
#body {
width: 100%;
height: 3450px;
background-color: #2FA3F7;
}
#body_inner {
width: 1280px;
height: 3450px;
margin: 0 auto;
}
#side_menu {
width: 220px;
height: 270px;
position: fixed;
background-color: #ffffff;
}
#footer {
width: 100%;
height: 200px;
background-color: #FF00AB;
}
<div id="header">
</div>
<div id="body">
<div id="body_inner">
<div id="side_menu"></div>
</div>
</div>
<div id="footer">
</div>
I did not use any jquery this time. With the codes given above, since the #side_menu is set as height: 270px, it seems to be okay with the overlapping, however, it still overlaps with the footer if you zoom up the browser (and sometimes depending on the types of browsers and computers).
I would like to know why it happens, and how can it be solved (or prevented).
Thanks in advance :)
Here's a fiddle with the solution
https://jsfiddle.net/stc0ogy2/1/
you need to start using the z-index, it works like the photoshop layers though the z-index will not work without the position so you have to add a position like absolute, relative and so on.
UPDATE
As #AndreiGheorghiu mentioned you should use some javascript for a better solution, choose one of the libraries from the list he gave you.
UPDATE 2
I found this easy-to-use library that I believe will help you with the fixed side menu, it's called tether. Hope it helps.
Your footer is looking to take up 100% of the width space at the bottom and a side bar that wants to take up 220px of the width. On a small screen your menu and footer are fighting for space because its not mathematically possible for one item to take up 100% of space and another item to sit next to it.
You won't notice a problem full screen on most desktops because your menu is too heightwise to be noticeable.
Ideally when declaring your width for the menu and footer you want to use calc() to enable resizing without causing overlap.
https://jsfiddle.net/nu8av25m/ a quick example I put together to demonstrate how it works.
<body>
<div class="navigation">menu</div>
<div class="main">main body</div>
<footer>footer</div>
</body>
.navigation {
Width:50px;
Height:100%;
Background-color: red;
Float:left
}
.main{
Width: calc(100% - 200px);
Height: calc(100% - 100px);
Background-color: blue;
Right:0;
}
Footer{
Width: calc(100% - 100px);
Height: 50px;
Background-color:green;
Bottom: 0
}
I have a WP blog with fluid layout, the main content is in a centered div, about 1000px wide.
Now I want to put an ad banner area on each side, and I want to use fixed on the position so that these ad:s stay when user scrolls down the blog.
I have seen blogs with similar ad's but they don't have the fluid layout but instead can use the position: fixed and width:Ypx left:-Ypx which make their ad fixed nicely on the left side always.
It seems that this is not possible though with a fluid layout?
This is the effect I am trying to mimic, see how both sides don't scroll down...
http://radarmagazine.se WRONG SITE
--- update ---------
I put the wrong sample site.. this is the one with fixed positions:
THIS IS THE SAMPLE SITE:
http://freshnet.com
This is possible without JS. Here's my approach.
Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.
<div class="ads"> <!-- Dedicated position: fixed; -->
<div class="wrap"> <!-- Cloned container for positioning of Ads -->
<img src="http://placehold.it/100x750&text=Ad1" />
<img src="http://placehold.it/100x750&text=Ad2" />
</div>
</div>
<div class="wrap"> <!-- Main container with a z-index of 1 -->
<img class="main" src="http://placehold.it/960x300" />
</div>
Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.
http://jsfiddle.net/m0v3vqcp/ - Fiddle
Full Screen /
With Their Ads
It's possible using some JavaScript, fetching the width of the content on the window.resize event and then updating your Ads position on the x-axis based on that value. I made a JSFiddle to illustrate how this could be achieved.
http://jsfiddle.net/r86r6j1f/
You can use padding on the body to make room for the banners, a quick example:
http://jsfiddle.net/dpcd3c1b/
I don't believe you need Javascript for it. You should be able to do it with a couple of relative positioned floats and positioned fixed.
http://jsfiddle.net/9ov32nkd/1/
body, html {
margin: 0;
padding: 0;
}
#wrapper {
min-width: 960px;
position: relative;
margin: 0 auto;
}
#inner {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
}
.content {
width: 720px;
padding: 20px;
background-color: #CCC;
margin: 0 auto;
float: left;
}
.banner {
width: 100px;
height: 100px;
position: relative;
}
.banner1 {
float: left;
}
.banner1 .inner,
.banner2 .inner {
background-color: #EFEFEF;
height: 300px;
width: 100px;
position: fixed;
top: 0;
}
.banner2 {
float: right;
}
UPDATE: The problem has been solved using the code provided by Pradeep, specifically the "clearfix" code. I asked this question in search of a way of keeping my wrapper <div> behind all of my content, i.e. extend its height to the full height of all its children, and considered using a moving <div> where in reality my problem was fully discussed in "What is a clearfix?" and in CSS clearfix demystified.
Essentialy my container <div> had floating elements within that were expanding past the bottom of my wrapper. I wanted the wrapper to be behind all of my content so that users could read the text that was on top. Applying this new CSS class clearfix to my wrapper <div> the problem was solved but a new one created. I lost the ability to center the <div> on the page, which I did not state in my original question below. The solution to being able to center it again without losing the "clearfix" solution was to use a parent <div> that has margin-left: auto and margin-right: auto set. See CSS clearfix how to over come the inability to center an element using it
The Origional Question:
http://jsfiddle.net/L7TKx/
I want my <div> to move with the page as the user scrolls down the page.
I have seen answers on this site as well as others stating that you need to add the postion:fixed property but when I do this, my div which was centered on the page is now left aligned and the scroll bar disappears, so you cannot view the rest of the content. I'm looking for a fix that keeps the scroll bar and as the user scrolls, the <div> follows.
See http://www.rustdome.hfbsite.com/ I want that off white background to follow behind the text as the user scrolls.
I have the following and have experimented with position:fixed but that disables the scroll bar.
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
}
html {
min-height: 100%;
position: relative;
}
body {
height: 100%;
}
You can try below code:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
Above css add in your css file..and Add "clearfix" class in your main div(wrapper).
Good luck...
Instead of using position:fixed you'll probably want to use background-attachment:fixed. This will just make the background fixed while the text keeps being scrollable.
Regarding Pradeep's code you could also have used a simpler approach. You just needed to add this rule to your CSS:
#wrapper::after {
content: "";
display: block;
clear: both;
height: 0;
}
You will probably want it to be a separate div entirely from the one that houses your content. I am assuming the #wrapper is the off-white thing you want to move around, and I'd try something like bellow.
HTML:
<html>
<body>
<div id="wrapper"></div>
<div id="content">
Your Content
</div>
</body></html>
CSS:
#wrapper {
min-width: 740px;
max-width: 1000px;
width: 100%;
position: fixed;
left: 50%;
margin-left: 500;
background-color: hsla(30,100%,97%,0.69);
height: 100%;
z-index: -1;
}
#background {
z-index:-2;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:
html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
html,body,#wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
}
#header {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
color: white;
background-color: #000000;
}
#content {
position: fixed;
padding-bottom: 50px; /* to match the footer height*/
top: 40px;
bottom: 50px;
height: 100%;
width: 100%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
height: 49px;
width: 100%;
border-top: 1px solid #000000;
background-color: skyblue;
font-weight: bold;
}
The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are always in view. Header up top, footer on the bottom and content in the middle respectively.
The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page.
The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel must be inside the content div, not page-wide.
I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.
I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).
Here's how it looks right now, notice the scroll-wheel problem on the content div:
I hate when this happens...I found the solution just after I posted, decided to try one more thing: I've set the #content height to 'auto' and that did it (since once I drew my own attention to the scroll-wheel, it became apparent the problem is with the div height)! Just need to test and make sure that's the case with all/most browsers!
Maybe it will be helpful to someone else though!