I have a problem with relative positioning in Google Chrome
The following code works fine in IE but not in Chrome.
Relative positioning is relative to the normal position of an element.
The normal postion of the red box is right under the black box.
If I add a 10% space the red box should appear 10% under the normal position.
jsfiddle
Html
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
Css
#outer
{
position:absolute;
left:20%;
right:20%;
bottom:20%;
top:20%;
background-color:Blue;
}
#inner1
{
position:relative;
width:20%;
height:20%;
background-color:Black;
}
#inner2
{
position:relative;
top:10%;
width:20%;
height:20%;
background-color:Red;
}
For relative positioning to work the parent should have a size:
width: 100%;
height: 100%;
check the result in this fiddle
Ok, just realized myself now, what the problem of this is:
the % for the top value is always referring the height of the parent element. Since you didn't set a height it is zero; if you set a height on the parent element everything is working as you wished...
see this jsfiddle, i just added
height: 60%
to the parent css.
Related
My site is like this:
Left div | right div
Inside my left div, I have a position absolute element "custombox" that shows up over the "right div" (its got z-index:999), just because I want the code to be on the "left div side". My custombox has a css property "resize:both", which does not work. WHen I put a "position:relative" on my leftbox, then the position of my "custombox" is messed up and literally goes into "left div", which I don't want. How can I make my "custombox" resizable? (if absolutely needed, js plugins are okay)
.leftdiv {
background:red;float:left;width:50%;height:300px;
}
.custombox {
position:absolute;
top:10px;
right:50px;
z-index:999;
background:yellow;
height:100px;
width:100px;
resize:both;
}
.rightdiv {
background:blue;float:right;width:50%;height:300px;
}
<div>
<div class="leftdiv">
<div class="custombox">
I like staying in the blue, but I want to be resizeable too.
</div>
He
</div>
<div class="rightdiv">
blue
</div>
</div>
Fiddle attached:
http://jsfiddle.net/axhqg20x/3/
Changing the overflow property of .custombox to scroll makes it resizable:
.custombox {
position:absolute;
top:10px;
right:50px;
z-index:999;
background:yellow;
height:100px;
width:100px;
resize:both;
overflow:scroll;
}
http://jsfiddle.net/axhqg20x/4/
I have a "fixed" DIV on the very top of my page:
<div id="banner-wrapper">
<div id="banner"></div>
</div>
with the following CSS:
#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}
This "fixed" DIV is followed by a "content-wrapper" DIV:
<div id="content-wrapper">
<div id="content-left">
content left
</div>
<div id="content-right">
content right or sidebar
</div>
</div>
with the following CSS:
#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}
The issue I'm having is that the "content-wrapper" DIV does not fully cover the "fixed" DIV. The top of the "content-wrapper" covers the "fixed" DIV and the bottom of "content-wrapper" becomes transparent, showing the "fixed" DIV beneath.
I was able to solve the problem by giving the "body" a height in CSS. However, I do not want to give the "body" a height as I do not know the true hight of the content and would like it to remain flexible. I've also have tried inserting
<div style="clear:both;"></div>
before the closing tags but it does not force the "content-wrapper" down.
Here is an example of the issue on JSFiddle.
As you can see, the "red" box does not reach the "blue" box even though it is set to absolute, bottom 0. From what I can tell it reaches the bottom if it does not contain any DIVs inside of it. But once I add the "content-x" DIVs, it no longer reaches the bottom of the page.
Thank you for any help.
You could relatively position the element #content-wrapper rather than absolutely positioning it. Then you can omit the top/bottom positioning and it will behave as expected.
The reason it wasn't working in the first place was because you were giving the absolutely positioned element a height of 100%. Therefore it will have the same height is the window, which is not what you wanted.
Updated Example
Change the following:
#content-wrapper {
width: 300px;
height: 100%;
background: red;
position: absolute;
top: 500px;
bottom: 0;
}
to:
#content-wrapper {
width: 300px;
background: red;
position: relative;
}
This is my style.
<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>
This is my HTML :
<div class="wrapper">
Wrapper
<div class="pos-rel">
Position relative Parent block
<div class="pos-abs">
Position Absoulute child block
</div>
</div>
</div>
JSFIDDLE HERE
Problem is :
The block having position absolute is visible only half. Half block is hidden due to wrapper.
Before you give any solution, i must state that i have to used Overflow:hidden in the parent block.
Actually, you can avoid parent's overflow:hidden, if you remove position:relative from .wrapper. Here is working example
Can you tell me what you want to create
like if you are using overflow: hidden then it will not come.
or else you have to reduce right minus margin from right.
can you make it more clear like why you want this..
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).
And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it's for a background picture).
However, the child <div> is only as wide as the window and doesn't quite fill up its parent. This happens in all browsers I've tried.
Why is that, and how can I fix it ?
Source :
<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}
.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>
<div class="parent">
<div class="child">this should stretch as much as its parent !</div>
<div class="stretcher">this is some content that defines the page's width</div>
</div>
JSFiddle
The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.
As for how to fix it, not sure exactly what you're trying to accomplish with the stretcher div and why you don't just give the parent the width. Perhaps you could expand a bit on what you're trying to do with this structure.
Maybe the outside <div> should be positioned relative. The inside <div> can be absolute but you may want to try adding right:0px; as well as left:0px which you already have. I would avoid absolute positioning unless there is no other way to do it.
I'm not sure why the child <div> doesn't fill the parent, but in order for it to work you need to wrap the .stretcher <div> around both the parent and child <div>.
Source:
<style>
.parent {
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child {
width:100%;
height:200px;
position:absolute;
bottom:0;
background-color:#000;
color:#fff;
}
.stretcher {
width:10000px;
height:100%;
position:absolute;
}
<div class="stretcher">
<div class="parent"><p>this is some content that defines the page's width</p>
<div class="child">this should stretch as much as its parent !</div>
</div>
</div>