I have no idea how to title this properly, but here is my problem:
I have this layout:
<html>
<body>
<div id="content">this is my page</div>
<div id="button">magic button</div>
</body>
</html>
css:
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
html, body{
height: 100%;
}
#content {
margin: 0 auto;
width: 700px;
min-height: 100%;
background-color: #eee;
}
See fiddle here: http://jsfiddle.net/n6UPF/
My page works just as I want it, the button is exactly where I want it to be.
But if I change the text on my button, it is no longer positioned properly.
I would like to position it "fixed" relative to the right edge of my content area.
Can this be done in pure CSS?
If modifying the HTML is acceptable, you can use a wrapper:
<div id="button-wrapper">
<div id="button">magic button</div>
</div>
#button-wrapper {
bottom: 40px;
left: 50%;
margin-left: 350px;
position: fixed;
}
#button {
background-color: red;
padding: 5px;
position: absolute;
right: 10px;
white-space: nowrap;
}
http://dabblet.com/gist/3740941
No, it's not really pretty, but...
Do you mean...
#button
{
position: fixed;
right: 20px;
}
...or whatever distance you want on the right? Or something else?
I'm not sure if I fully understand your question correctly, but could you not just use the right property instead of left?
Example: http://jsfiddle.net/baKra/
Usually when I run into trouble with exact positioning, it's because I haven't specified the width of my positioned element. The browser will try to calculate it itself, and that can throw things off.
Is there any way you can post what it looks like when it's no longer positioned properly?
I am wondering if you are looking for the float:right property.
Can you look at http://jsfiddle.net/n6UPF/1/ and see if that is what you were looking for.
Try changing
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
to
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}
Related
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
I'm trying to position an image to the right within a container. However, after I set my parent container to position: relative;, my image disappears. Any ideas? Website: http://andrewgu12.kodingen.com/. Thanks!
CSS:
.slide {
padding-top: 138px;
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
div#inner-container {
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
white-space: normal;
position: relative;
}
div#name {
right: 0;
bottom: 200px;
position: absolute;
}
HTML:
<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
<div id="inner-container">
<div id="name" clas="row">
<img src="images/names.png">
</div>
</div>
</div>
It does not disappear, it just goes all the way up and out the monitor xD You have to remember that when you use position: absolute the object is going to look for a parent that has position: relative to position itself. When you add position: relative to div#inner-container it changes the div#name.row reference. Maybe adding height: 100%; to the parent div might do the trick for what you want?
Try this:
div#name {
position:fixed;
right: 0px;
bottom: 200px;
}
I Solved it! The parent div that has position:relative actually goes really high up the monitor. So you need to set the the top style to 0px and play around with the top,bottom,right,left styles that come with position relative. So basically add (top: 0px) to your css styling.
I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it.
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0; }
#container {
position: absolute;
float: right;
z-index: 1;
}
.left1 {
background-color: blue;
height: 50px;
width: 100%;
}
.left2 {
background-color: green;
height: 50px;
width: 100%;
}
#right {
background-color: red;
height: 300px;
width: 300px;
float:right;
z-index: 999999;
margin-top: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>
</body>
</html>
You most probably don't need z-index to do that. You can use relative and absolute positioning.
I advise you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)
Edit: Just to be clear, positioning is not a replacement for them and I do use z-index. I just try to avoid using them. Using z-indexes everywhere seems easy and fun at first... until you have bugs related to them and find yourself having to revisit and manage z-indexes.
you could put the style in container div menu with:
<div style="position:relative; z-index:10">
...
<!--html menu-->
...
</div>
before
after
Ok, Im assuming you want to put the .left inside the container so I suggest you edit your html. The key is the position:absolute and right:0
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 999999;
margin-top: 0px;
position: absolute;
right:0;
}
here is the full code: http://jsfiddle.net/T9FJL/
#right {
background-color: red;
height: 300px;
width: 300px;
z-index: 9999;
margin-top: 0px;
position: absolute;
top:0;
right:0;
}
position: absolute; top:0; right:0; do the work here! :)
Also remove the floating!
newbie to z-index. I want to put backleftBox and backrightBox behind the frontBox, but my code doesnt seem working.
<style type="text/css">
#frontBox{ width: 400px; height: 500px; margin: 0 auto; background-color: #ccc; position: relative; z-index: 99;}
#backleftBox{ width: 90px; height: 90px; background-color: green; position: absolute; left: -25px; z-index: 12;}
#backrightBox { width: 90px; height: 90px; background-color: blue; position: absolute; left: -15px; z-index: 11;}
</style>
<div id="frontBox">
<div id="backleftBox"></div>
<div id="backrightBox"></div>
</div>
The problem you have here is that "backleftBox" and "backrightBox" are children of "frontBox". Just move them outside "frontBox" and they should go underneath.
backrightBox and backleftBox can't be behind frontBox when they're inside it. Not sure how you want it to look, but they can't be nested like that, and you will then have to change your position, and margin attributes to align them. the z-index is fine the way you have it.