I need to have my element's position set to fixed because I want to use it as a header in scrollable div. I also need to specify the elements poisition at top:0 and right:0
If I use those properties together it doesnt work. How can I solve this;
position:absolute;
top:0;
right:0;
works but I need to have position fixed..
If I use position fixed the div is position over the whole document not inside my div where I append it...
Fiddle:http://jsfiddle.net/TP2cp/
Use position:fixed.
Example:
HTML
<div class="main">
<div id="header"><p>Header</p></div>
</div>
CSS
.main{
width:100%;
height:2000px;
}
#header{
width:100%;
height:100px;
position:fixed;
top:0;left:0;
background:yellow;
}
JSFiddle.
UPDATE
A solution with width:inherit; :
JSFiddle#2.
Who said you couldn't use those properties together?
position:fixed;
top:0;
right:0;
Try it out yourself in this example jsFiddle here.
HTML:
<div id="theDiv">Example Div</div>
CSS:
#theDiv { position:fixed; top:0px; right:250px; }
In reply to OP's edit:
You can't have a fixed positoned div inside a container div like that, as making it a fixed div will take it out of the flow. You should use position:absolute inside of a container div with position:relative if you plan on having it fixed inside another div.
Take a look at my new jsFiddle here.
HTML:
<div id="container">
Container Div
<div id="fixed">Child Div</div>
</div>
CSS:
#container {
width: 400px;
position:relative;
}
#fixed {
position:absolute;
top:0px;
right:0px;
}
Why not:
position:fixed;
top:0;
right:0;
the problem is how did you positioned the scrollable div? if I have understand what you want I think you just need to put the header outside the scrollable div
Related
Idea is do not use vertical or horizontal scroll bar in body section. I have a div which is having css like this:
display: flex;
height: 100%;
I want inside div height to be fully responsive. The height should be auto adjusted based on the height of the device. for inside div we can have scroll bar no problem based on the data.
Hope you guys understood my question, please help.
as you don't want scroll on the body but inside your main div.you can achieve using following css and html.
<div class="main">
<div class="content">
// you content goes here...
</div>
</div>
and the css for .main class and for .content class are as follows.
.main{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: auto;
}
here is the demo https://codepen.io/anon/pen/MpLZqd
i hope this will help.
I have a div that have css: height:50%; and inside there is another div with css: height:50%;.
Inside the second div, there is an image.
I can't have the image in the same dimension respect to height of the two (equal) div.
How can I fix it?
Example:
#div1{
height:50%;
position:fixed;
top:25%;
}
#div2{
height:50%;
position:fixed;
top:25%;
}
#image{
height:50%;
position:fixed;
top:25%;
}
<div id="div1">
<div id="div2">
<asp:Image id="image" url=".." runat="server">
</div>
</div>
The image is 20x387. The resolution is 1280x1024.
You should remove position fixed from img element, because position:fixed has no connection with the parent element.
So if you put position fixed to an element, it won't consider what his parent is doing.
Position fixed to that img element is also useless, because it is wrapped by a fixed position element.
Cheers :)
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.