Given below the fixed div CSS:
.top-container {
position: fixed;
width: 100%;
z-index: 999;
}
When I zoom out my screen, this div breaks the main container at the right side but left side is okay. Check below screenshot for better understanding.
You have to understand how position: fixed; is working. It ignores any surrounding element.
You can find detailed information here.
Here's a quote:
A fixed position element is positioned relative to the viewport, or the browser window itself.
UPDATE
What you can try is to use a margin-left same as the left element's width and margin-right same as the right element's width to the .top-container element. This is obviously not an ideal solution but solves your problem.
I am late to answer this for this question but I am sure this is a common problem to exist in future and will help the future searchers.
This can be solved by applying a trick. We can use calc here.
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
This worked for me. Please note that in my case I intended the floating element to be shifted on the right side. If you want it on the left please use left instead of right.
Related
I am having a CSS issue; See the attached image.
there have two fixed div.. where i will put my navigation and yellow area is my content area. content area will be scroll if content big..
but now problem i am facing content area position not fit properly. when i make other two div position: fixed then issue coming. please see my code and jsfiddle..
.midarea this div position not properly fit there. if you see jsfiddle then can under properly..
JSFiddle
You need .midarea to be fixed to match the others:
.midarea {
position: fixed;
left:260px;
right: 0;
height: 100%;
overflow: auto;
...
}
With this your float and width are obsolete (but you can have them if you really want).
Also please, please lose every z-index and every float with a position: fixed or position: absolute.
Visualize
position:fixed is absolutely OK.
Just calculate the sum of width of both fixed nav-colums and set a padding-left with this calculated width to the div.midarea. So all divs inside the midarea begin right of the fixed colums.
And a z-index higher of the content is needed. e.g. z-index:999;
I have a site with absolute positioned elements on it, for example the top Navigation of the site:
#topNav
{
position: absolute;
top: 100px;
left: 50%;
height: 40px;
width: 1000px;
margin-left: -500px;
}
Now I created a sticky footer like on the following site:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Now, the problem is that the footer will "overlap" the topNav,
because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.
Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?
EDIT:
JsFiddle here: http://jsfiddle.net/dkxUX/15/
When you scale down your browserwindow you'll find #footer overlapping all elements before it.
You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.
Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.
/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}
Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.
a little bit too late to give an answer but it may help someone in the future, I came up with that problem not too long ago so here was my shot at it, using jquery since I couldn't came up with a CSS solution that wasn't removing the DOCTYPE tag (which isn't something you should do, anyways).
So here it is.
$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");
$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
});
So yeah, that's all there is to it, you just dynamically add another div at the start of the container hard-placed under the absolute div, that will force all subsequent relative divs to me placed after it, it is like a clear fix for someone who ran out of ideas.
This is a very simple layout, and the menu and navigation are suppose to stay fixed to the left, use any modern browser appart from IE to see how its suppose to look.
IE7 seems to fix the div's but pushes there position to the right, im not sure if this is a Position: fixed problem, or a float problem, or something else...
http://snapclicker.com/
Thanks.
It's a problem with position: fixed.
#sandeep has the right idea (explicitly define top and left), but I'm going to add specifics, because I just found them.
To #header, add left: 5px and top: 5px.
To #nav, add left: 5px and top: 151px. Remove the margin-top rule.
Hey, gods
if given position:fixed .so, there is no need to given float .Basically define position attributes.
try this:
position:fixed;
top:0px;
left:0px;
both sandeep and thirtydot are right.. to avoid re-calculating position though.. wrap the left column (both the fixed divs) in a div and float it at 233px width, then add position: relative to it too - also remove the floats from the fixed divs, they aren't doing anything
#sidebar {
float: left;
width: 233px;
position: relative;
}
the your existing fixed divs should still work and you can change the padding (on the #container) without re-calculating
This question already has an answer here:
What are the CSS properties that get elements out of the normal flow?
(1 answer)
Closed last year.
I know position: absolute will pop an element from the flow and it stops interacting with its neighbors.
What other ways are there to achieve this?
One trick that makes position:absolute more palatable to me is to make its parent position:relative. Then the child will be 'absolute' relative to the position of the parent.
jsFiddle
None?
I mean, other than removing it from the layout entirely with display: none, I'm pretty sure that's it.
Are you facing a particular situation in which position: absolute is not a viable solution?
Another option is to set height: 0; overflow: visible; to an element, though it won't be really outside the flow and therefore may break margin collapsing.
There's display: none, but I think that might be a bit more than what you're looking for.
position: fixed; will also "pop" an element out of the flow, as you say. :)
position: absolute must be accompanied by a position. e.g. top: 1rem; left: 1rem
position: fixed however, will place the element where it would normally appear according to the document flow, but prevent it from moving after that. It also effectively set's the height to 0px (with regards to the dom) so that the next element shifts up over it.
This can be pretty cool, because you can set position: fixed; z-index: 1 (or whatever z-index you need) so that it "pops" over the next element.
This is especially useful for fixed position headers that stay at the top when you scroll, for example.
For the sake of completeness:
The float property removes a element from the flow of the HTML too, e.g.
float: right
Floating it will reorganise the flow but position: absolute is the only way to completely remove it from the flow of the document.
I know this question is several years old, but what I think you're trying to do is get it so where a large element, like an image doesn't interfere with the height of a div?
I just ran into something similar, where I wanted an image to overflow a div, but I wanted it to be at the end of a string of text, so I didn't know where it would end up being.
A solution I figured out was to put the margin-bottom: -element's height, so if the image is 20px hight,
margin-bottom: -20px;
vertical-align: top;
for example.
That way it floated over the outside of the div, and stayed next to the last word in the string.
Try to use this:
position: relative;
clear: both;
I use it when I can't use absolute position, for example in printing when you use page-break-after: always; works fine only with position:relative.
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.