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
Related
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.
I got this code: http://kod.djpw.cz/xodb-
And the fixed element bounces up and down on scrolling. This actually happens only in IE.
I need to have that blurred background but I guess it makes no difference in this case.
Bouncing stops when I remove: margin: 0px; from body
Actually I would rather have margin specified like this: *{margin: 0px;} if its possible.
But I really need it to be there, otherwise it actually makes margin on top and left side.
Anyone any ideas?
Set that element z-index to 99 and try if it works....
e.g:
box{ position: fixed; z-index: 99; }
I have used the perfect codrops css3 rotating words according to my needs, but I can´t make the appearing words align right in the center. All I need is make the sentence align in center and so the rotating words.
But because it´s position absolute, and floating left, the word starts on left 50% position.
Can anyone help with this? I have tryied a lot of experiments but nothing seems to work.
Here is a jsfiddle: http://jsfiddle.net/nzAPr/
Setting the container to position:relative and the span to 100% seemed to work.
.rw-words{
display: block;
position: relative;
}
.rw-words-1 span{
position: absolute;
width: 100%;
...
}
http://jsfiddle.net/willemvb/9Xubs/
try removing the indent here:
.rw-words{
display: block;
text-indent: 10px;
}
I am not sure if you are still looking for a solution for this.
The animation can only set a centre start point and that's why your words show up shiftet to the right.
You can fix that if you give every child a negative margin and space it out manually.
This is what I got when I was playing around with the code:http://jsfiddle.net/9Xubs/109/ margin-left: -35px;
I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used:
z-index: -1;
position: relative;
top: -60px;
This gives the desired result, but I get an extra space of 60px at the bottom.
How do I clear this extra space?
Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.
The “extra” space at the bottom is the space that the footer would be taking up. Relatively positioned elements still take up the same space in the page’s layout flow, even though they’re appearing somewhere else.
You could try a negative bottom margin on your mainbody. You may find this means you don’t need top: -60px; on your footer.
You can still use:
position: relative;
top: -60px;
for the section you need but set
margin-top: -60px;
to section which appears next. In this case - footer.
another solution for this is:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top creates extra margin and margin-bottom removes it
for some reason for h tag only this worked for me. negative margin-top doesnt work
One way to achieve that would be to put the div inside another, absolute'ly positioned div so that it's taken out of the document flow.
Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.
If it´s an image, you can simply put it in html {} or body {} (or a div that encapsulates all content) and align it to the bottom.
The appropriate answer is to make the body have position relative then style what you want to style using position absolute and using top of your choice
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
Currently its:
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
I know it's something simple I'm missing, but I just can't seem to nail it.
What do you mean by impacts? Content will flow around a float. That's how they work.
If you want it to appear above your design, try setting:
z-index: 10;
position: absolute;
right: 0;
top: 0;
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relative to that section.
Try setting its position to absolute. That takes it out of the flow of the document.