I want the bottom-wrapper div to show up below top-wrapper div (like normal order).
Right now it's showing up underneeth the top-wrapper
What am I doing wrong here?
http://jsfiddle.net/uqtZ5/
HTML
<div id='top-wrapper'>
<a href='#'>Title to overlay</a>
<img src='image.jpg' />
</div>
<div id='bottom-wrapper'>
<a href='#'><h3>Header</h3></a>
<p>Lorum ipsum</p>
</div>
CSS
#top-wrapper {
position:relative;
}
#top-wrapper a,
#top-wrapper img {
position: absolute;
}
#top-wrapper a {
background-color:#FF0000;
z-index: 10;
}
You set a and img in top-wrapper position to be absolute.
In this case the position is absolute in relatively positioned DIV but you didn't set the height of top-wrapper so absolute positioned content comes over div bottom-wrapper. Try to specify the top-wrapper height to match img height and see if that solves your problem.
So try this:
#top-wrapper {
position:relative;
height: 216px;
}
Related
I am using bootstrap templates and have split the page into a fixed sidebar and the remaining part of the page is one big picture. However the picture will not match the height of the sidebar. There is always a white gap after the picture even though the sidebar has 100% height. So how can i make my picture take up 100% height?
My html:
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="sidebar affix">
</div>
</div>
<div class="col-sm-9 pic">
<div><img src ="homepage/pic5.jpg" class="img-responsive"></div>
</div>
</div>
</div>
My Css:
.row.content {
height: 684px;
}
.sidenav {
height: 100%;
}
.pic .img-responsive {
height: 100%;
}
.pic {
padding: 0;
position: relative;
}
.sidebar {
width: 22.5%;
top: 0px;
}
.pic > div {
position: absolute;
}
Try to change like this
.pic > .img-responsive {
height: 100%;
}
You are placing your img in an div which you give position absolute, while you give the img position relative in the div with position absolute.
position: absolute
Places an element absolute, meaning on its self. There for any heights or width of any elements around it will not effect the element, it is absolute.
I havent tested it but you should remove the position:absolute, position:relative and the div around your img.
Hi i feel really stupid for asking this, I have a site that I am working on and I am trying to position my profile picture absolutely to a div with a position of relative, however it doesn't work and the parent div does not wrap around the img. I'm sure it's a simple solution. Does the parent div have to have a height and width?
.parent {
position: relative;
}
#profilepic {
position: absolute;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="Images/Portraits%20circle.png" alt="profile picture"/>
</a>
</div>
I have not made the changes to the live site yet but the issue can be replicated in the browser
EDIT Thank you for the help
I assume, you got something wrong there about absolute positioning of HTML elements.
By setting an element to position:absolute; you take it entirely out of the document flow. Therefore there is no kind of automatic wrapping around of any parant element. The only connection to the actual parent Element is that you might have that one set to position:relative so the coordinates of your absolutely positioned elements depend on the position and dimension of its parent.
Your Idea only works properly here, if you know exactly the size of the final image. Then you could use something like that: https://jsfiddle.net/k98cLdvq/
CSS for this looks like:
.parent {
position: relative;
border:1px solid #c00;
width:200px;
height:200px;
}
#profilepic {
position: absolute;
border:1px solid #0c0;
width:100px;
height:100px;
left:50px;
top:50px;
box-sizing:border-box;
}
By adding the following you would get the effect you described:
a:hover #profilepic{
width:120px;
height:120px;
left:40px;
top:40px;
}
You are going to have to set the width and height of the container to provide a big enough base for the image to sit on top of (the container will not wrap around it as the absolutely positioned image is out of the document flow and instead sits on top) - ensure you have position:relative on the container and presuming you want the image at top left then top:0 and left:0 on the image. I presume you are positioning absolutely for layering? If not I would question using absolute positioning given the extra complication of making the underlying container big enough.
When positioning absolutely, you should remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
JS Fiddle
.parent {
position: relative;
background-color: green;
height: 150px;
width: 200px;
display: inline-block;
margin: 2px;
}
#profilepic {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s;
border: 2px solid navy;
}
#profilepic:hover {
width: 120%;
height: 115%;
z-index: 10;
transition: all 1s;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image1" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image2" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image3" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image4" alt="profile picture" />
</a>
</div>
When setting the position properties, you're best off setting top/bottom and left/right to get the results you expect. But you shouldn't, as you've said above,
set the top and bottom to 0
Instead, you should set either the top or the bottom property because setting both properties will cause them to contradict each other and the browser is likely to ignore both or pick one depending on the implementation.
Try this out: https://jsfiddle.net/9vbojg0w/
HTML
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/220px-Charles_Darwin_seated_crop.jpg"/>
</a>
</div>
CSS
/* background-color and width/height only for demonstration
* width/height can be removed if other elements cause the
* parent's size to expand
*/
.parent {
position: relative;
background-color:#ddd;
width:200px;
height:300px;
}
#profilepic {
position: absolute;
top:20px;
left:20px;
}
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.
Here is my html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
And in fiddler:
http://jsfiddle.net/AndroidDev/eJZ7X/
Do you need something like this?
Demo
div {
position: relative;
}
div img {
max-width: 100%;
max-height: 100%;
}
div img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.
Note: Am using first-of-type pseudo so you do not have to alter your
DOM, but if you think that the order of the img might change than
better assign a class to the delete img instead.
As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be
.img_holder > div {
position: relative;
}
.img_holder > div > img {
max-width: 100%;
max-height: 100%;
}
.img_holder > div > img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
And the DOM would look like
<div class="img_holder">
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
</div>
I've updated your fiddle here
The icon img now has an icon class and is absolute positioned in the div.
html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
css:
.icon {
position: absolute;
}
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.