I have a div element which is header and is fixed. I want it to remain at top of my website while other contents move below it while scrolling.
Below this header is a div element containing two div elements, one is floated left while other right.
Now when i scroll down my webpage left floated div element moves below the header as it should. However the other div element is moving over the header. I tried using z-index but it's not working. Please help.
Please add the sample code to understand the problem.
Try adding z-index to the parent. Something like this
.fixed{
z-index:1;
}
.float-parent{
z-index:0;
}
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
so when I go to set both Nav and Header to fixed, it starts out fine. I adjust the Nav margin-top so that it appears under the header, that works. Now when I adjust the div, that's where things go wrong. So the div of course appears behind the fixed elements, and when I go to adjust the div's top margin it brings everything with it. How do I get it so that the divs stays below my header and nav bar so this:
So I want the header, nav, and footer to be stationary, and the div to be the only scrolling section of my website. I set both my header and nav to "position:fixed", though when I test it, my non-"fixed" div appears over the fixed elements. Whenever I try to move the div down by adjusting its "margin-top" it moves everything along with it. With the div, header, footer, and nav all overlapping each other. So how do I get that to not do it?
Your "fixed" elements are being pushed down by your div, because you are not setting a top property.
When you don't set the top property, even the fixed elements will be rendered on the relative place where they would appear naturally.
Replace the margin-top property for top, and it will fix your issue. Also, give top:0px to your fixed element that doesn't have a margin-top.
Here are two examples showing this behaviour:
With margin-top: http://jsfiddle.net/HnZpN/ (issue)
With top: http://jsfiddle.net/HnZpN/1/
I would like to have the "Recent Activity" div fixed within the "Recent-Activity-Grid" div, so that when you scroll through the overflown information "Recent Activity" stays in the same spot. How would I do that? http://jsfiddle.net/aJHnV/3/
I am not sure how can you prevent "Recent Activity" div from scrolling as long as it is in the same div as the overflow content. I had put the overflow content into a new div, and have that div scroll itself to make it work:
http://jsfiddle.net/aJHnV/12/
And as the other answer said position:fixed won't work because it is relative to the Viewport.
A fixed position element is positioned relative to the viewport, or the browser window itself. So, you can't do this using only css.
have a fixed position: i.e
.fixedGrid
{
position: fixed;
}
Tell me if that worked. I have implemented this technique on my website. :)
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>
In this website: bgflirt.com
There is a 200px width div containing TEST: <div style="width:200px;">TEST</div>. I need this div to be positioned as a column ot the right side of the content below the menu. No matter what I do it just keeps staying below it. I need it along side of it. The middle part must still be able to resize freely. Any ideas ?
The sibling element #content is not allowing any room for this element. Try this.
Assign position:relative to #content_wrap
Assign margin-right:200px to #content
Assign position:absolute; top:0px right:0px; to your <div style="width:200px;">TEST</div> element.