I have an issue where I want to display a header in the top left of a DIV. If I set the parent to relative and the inner div to absolute I can then position it so the backgroundimage goes top right so it looks like this:
http://www.landingapollo.com/random/stackover1.png
That works correctly. However, in another instance it is not working correctly because the parent container has its overflow set to hidden. It thus displays like this:
http://www.landingapollo.com/random/stackover2.png
Relevant code:
This is the main container
.container {
overflow: hidden;
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
This is the title background
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}
If you give the parent container the correct height it will show your content even though you are using overflow: hidden;
An absolute element will not push a relative element to the correct size.
Basically if your relative container was holding only your absolute container then it would have a height of 0 because it doesn't contain anything that will increase its height.
Because of this when you use overflow: hidden; it will hide anything that goes past the height of the relative container (In my example 0)
So try giving your relative container the correct height and see if that works.
I think You will need another div to achieve the effect that you want.
<div class="floater">
<div class="container">...</div>
<div id="pinnedthree_title">...</div>
</div>
.floater {
overflow: visible
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.container {
overflow: hidden;
position: absolute
width: 650px;
}
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}
Related
[I want to make my work look like this][1]
[But my work is now like this][2]
The vertical grey line is the web border, all other divs' width would not exceed that line.
Now users might drag and see the rest of the image. It would be much better if the exceeded part of the image is hidden.
So here is my code:
html:
<div class="container-div">
<img class="the-img" src="image.png" alt="">
</div>
css:
.container-div {
text-align: right;
position: relative;
}
.the-img {
position: absolute;
overflow: hidden;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Also, all the parent div of .container-div in my exact code are already position: relative;
How do I fix this? Thanks!
[1]: https://i.stack.imgur.com/glA2q.png
[2]: https://i.stack.imgur.com/LcBpO.png
Have you tried adding overflow: hidden on the .container-div?
You definitely should put overflow: hidden on the parent element.
Then you should set a height to it, your browser can't set a correct height on the parent element because its child doesn't have any (because of absolute position).
.container-div {
text-align: right;
position: relative;
overflow: hidden;
height:200px;
}
.the-img {
position: absolute;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different.
I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to achieve this:
.image {
position: absolute;
top: 0;
left: 0;
margin-top: -30px;
margin-left: -10px;
display: block;
height: 200px;
width: 140px;
}
Now I need to achieve the same with an <img /> element. What I'm hoping to achieve is something like this:
So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?
something like this?
.parent {
display:inline-block;
width: 100px;
height: 300px;
background-color:lightgray;
margin-left: 100px;
}
.child {
width: 200px;
height:100px;
border-radius: 100px;;
background-color:gray;
position:abolute;
margin-left: -50px;
margin-top:100px;
}
<div class='parent'>
<img class='child'/>
</div>
edit: as per the comments below this is what i see
See the method bellow
Wrap the image in a DIV
Add border-radius to achieve the egg like shape
Add overflow with a value of hidden to the image container
use an image that's bigger than it's container so that it will take on the egg like shape.
#square {
width: 300px;
height: 300px;
background-color: #6D9BBE;
position: relative; /* Relative to curtail overlap */
margin: 0 auto;
}
#square #eggy {
width: 380px;
height: 200px;
background-color: #8500B2;
border-radius: 50%;
position: absolute;
top: 50px;
left: -40px;
overflow: hidden;
}
#eggy img {
width: 390px
height: 240px;
}
<div id="square">
<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->
</div><!-- End Square -->
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 wonder whether it's totally impossible to bleed a nested div when the container is positioned relative and has overflow set to hidden?
Giving the nested div a fixed position is not an alternative in this case.
Please take a look at this example: http://jsfiddle.net/s7nhw/11/.
Anyone who knows how to do this?
I'll appreciate any feedback!
<div class="container">
<div class="nested-div"></div>
</div>
<style>
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position: relative;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
position: absolute;
}
</style>
I've never encountered a situation where one could override {overflow: hidden}. You'll probably need to restructure your HTML to place the nested div outside its parent in the code, then use absolute positioning and z-index to position it behind the current wrapper.
http://jsfiddle.net/s7nhw/13
.container {
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position:absolute;
left: 50%;
margin-left: -50px;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class="nested-div"></div>
<div class="container"></div>
Here's some further discussion: override overflow:hidden with z-index
Absolute position child elements always remain under relative position parent element
I am currently working with images and backgrounds css positions. I have been struggling trying to get the same image appear beside(left/right) the the content area. I am trying to have the image position not be affected with pagee re size .
How can i get the same picture to appear beside the content area? EXAMPLE
This what I am aiming for:
Here's my stab at it. I used an absolutely positioned div positioned in the center to contain the images and then used position relative to get them to specific pixel positions to either side. The trick is that if you don't use relative positioning, they are on top of one another so you have to apply a top: equivalent to the height of the image to one of them to get it to shift to match.
HTML:
<div id="image_container">
<div id="img_r" class="outside_image">
<img />
</div>
<div id="img_l" class="outside_image">
<img />
</div>
</div>
CSS:
#image_container{
position: absolute;
top: 0px;
left: 50%;
width: 0px;
z-index: 900; /* not really required */
}
.outside_image img{
width: 200px;
height: 200px;
}
.outside_image {
position: relative;
}
#img_r{
float: right;
right: -725px;
top: 200px;
}
#img_l{
float: left;
left: -725px;
}
You could use a negative margin-left on #left2:
#left2 {
float: left;
width: 200px;
background: #DDD;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
margin-left: -248px;
}
If you need it to stay in the same place you (even if you resize the page) you could use an absolute position:
#left2 {
position: absolute;
left: 20px;
top: 160px;
}
I use Chrome developer tools to try this stuff out btw. Here's a screenshot of your page with my code:
http://d.pr/i/wXQ2