I have the following code and would like the inner div with the class: escaping-container to be displayed in front of the outer div with the class container.
The inner div has bigger height setting than the outer div. So a part of it is cut off.
Also the part that is being cut of by outer div must be displayed.
<style type="text/css">
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
position:relative;
z-index:1;
}
div.escaping-container{
width:50px;
height:150px;
position:relative;
z-index:10;
background-color:red;
}
</style>
<div class ="container">
<div class="escaping-container"></div>
</div>
I tried to get this done by setting the z-index, but it doesn't work. Any help will be appreciated.
Im afraid your question is a contradiction. If you want the inner div to be visible, you must remove the overflow-x and overflow-y css statements.
if the overflow settings are necessary
try this http://jsfiddle.net/sandeep/59nGZ/
css:
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
border:1px solid red;
}
div.escaping-container{
width:50px;
height:150px;
position:absolute;
background-color:red;
}
You won't be able to position the inner <div> outside the parent with overflow set to scroll, hidden or auto. To be able to do so you either need to change your markup, or remove the overflow-properties from your CSS.
Related
I have an element inside another element, and I would like that inner element to be wider than the parent by a set amount - lets say 40px. So it would look like this if the parent was 500px wide:
But if the parent is 600px wide, for example, I'd like the child to be 640px wide.
Without tying the outer element to any particular width, I'd like the inner element to always be 40px wider than the outer element. Is there a CSS only way to achieve this?
You can use calc for this.
For inner div, just provide following details
.inner {
width: calc(100% + 40px);
}
I don't know about the width increase, but you can give padding of inner div via css which may work for you.
You can give your inner div css like
.innerDiv {
/*padding-right: 20px; */
padding:20px; /*this will give to left and right side 20px padding*/
}
How to increase an width:auto DIV's width by X pixels using pure CSS
you can try this
HTML
<div id="parent">Parent Content
<div id="child">Child content</div>
</div>
CSS
#parent {
width:500px;
min-height:200px;
border:2px solid green;
color:green;
font-weight:bold;
}
#child {
width:100%;
min-height:200px;
padding:0 20px;
border:2px solid red;
color:red;
}
Fiddle Sample
Another Demo
you can use calc functionality in CSS.
div.parent {
height:150px;
width:300px;
background:#f00;
}
div.child {
height:100px;
width:calc(100% + 40px);
z-index:1;
background:#0f0;
}
<div class="parent">
<div class="child"></div>
</div>
Hope this helps
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 div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
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
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.