<body>
...other stuff...
<div style="width: 30px; margin-left: 500px; bottom: 0px;">
<img src="picture.png">
</div>
</body>
margin-left is working. Cannot figure out why the picture won't stick to the bottom..
For bottom to be effective, you will have to also use position set to relative or absolute:
<div style="position:absolute; width: 30px; margin-left: 500px; bottom: 0">
<img src="picture.png">
</div>
Use absolute or relative position depending on your layout requirements.
Note: With position set, you can also use left, right and top.
You have to explicitly position the element to be able to use the bottom property:
For absolutely positioned boxes, this property specifies how far the bottom margin edge of the box is offset above the bottom padding edge of its containing block.
For relatively positioned boxes, this property specifies how far the bottom edge of the box is offset above the position it would have had in the normal flow.
DEMO - source
The element is missing a position rule for the bottom to take effect. quirksmode has a good article on CSS positioning.
I think You are looking for something like this.
<div style="width: 30px; margin-left: 500px;">
<img src="picture.png" style='display: block;'>
</div>
The img by default has some space below, is above text baseline. It isn't margin or padding. The most common way to change this is to set display of image to block.
Related
I have a div with height:auto;
I do see that it will resize based on some elements. It does resize with just plain text for instance.
However, if i set a child div with specified size, the parent height:auto; div will not resize to fit around that child div.
So i was wandering if maybe changing the Display type would help? (no luck so far though).
Thanks
EDIT:
There are no floats inside the parent div, if not absolute elements are considered float?
The parent div is position:relative;
and the child div is absolute.
When i tried to use overflow:auto; on the parent div, scroll bars appeared on the parent div instead if making it bigger when needed.
Thanks for the replies!
<div style="height: auto; position:relative">
<div style="height: 50px; position:absolute;">ALOHA</div>
</div>
It sounds like your child DIV or content is floated. On its own, height: auto; will not scale around this as it doesn't recognise floats as a part of the regular document order.
Your best solution is probably to use overflow: auto; on your parent DIV.
Alternatively, if floats are responsible, your parent DIV will also wrap around floated content if you apply a float to the parent itself. This may not be ideal, though, because this will affect its placement - so overflow: auto; is most likely better.
If you can provide any examples of your code, I'm sure someone can give you a more specific example.
If you mean something like
<div style="height: auto">
<div style="height: 50px">ALOHA</div>
</div>
It will fix the parent.
Div doesn't fill parent div, but if you'll change your structure like thi:
<div style="height: auto">
foo bar foo bar<div style="height: 200px">heya</div>
<div class="clear" style="clear: both"></div>
</DIV>
height:auto will works.
edited ;)
Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
I am trying to overlay a div over my entire page to show a pop-up. The problem is, it won't overlay over the entire page. Here is an approximation of the code:
<div style="z-index:902;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
Overlay
</div>
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
The overlay div appears on top of container 1, but the contents of container 2 and 3 appear on top of the overlay.
I cannot move my overlay div outside of the container 1, as I am using a CMS (DotNetNuke if that helps).
I have tried setting the z-index of my overlay higher than the containers, but nothing is working.
Can anyone help?
Working Fiddle Example!
If you limit the scope of this problem to the code that you've presented, it is working just fine! e.g., On the Fiddle you can see that I placed a background color to the position:fixed div as to illustrate that the solution is working.
However, if you are using z-index, is safe to assume that your elements with z-index have some position applied.
Taking this into consideration, this part:
<div style="z-index:902;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
Overlay
</div>
Contents of container 1
</div>
cannot work as an "entire page" overlay since the inner div with position:fixed is inside a stacked element that has other stacked elements on the side (siblings), on the same stack position with z-index:902;.
See this Fiddle to illustrate!
If you move the siblings elements to a lower stack position, you can make it work. See this Fiddle Example!
Edited
This first part of my answer was edited as advised by My Head Hurts (see comments), to better explain that the first Fiddle works because the OP placed the question leaving place to guesses! No changes were made to the two solutions presented and approved at this answer!
A solution would be placing the overlay outside all other divs, but this depends on your goal:
<div style="z-index:902;">
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
<div style="position:fixed; z-index:10000; left:0; top:0; right:0; bottom:0; background:#ccc;">
Overlay
</div>
See this Fiddle Example!
EDITED
because of this comment:
Yes this would be the ideal answer, and I will accept it as it answers my question as written, but the problem I was facing was from some JavaScript that was dynamically changing the z-index of the other containers that I couldn't control making it impossible to place my div on top of them all.
Assuming that you can place whatever you wish inside container 1, and assuming that you are using or can use jQuery, you can do this to solve the problem:
<div style="z-index:902;">
<div class="placeOutside" style="position:fixed; z-index:903; right:0; bottom:0; left:0; top:0; background:#ccc;">
Overlay
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.placeOutside').appendTo('body');
});
</script>
Contents of container 1
</div>
<div style="z-index:902;">
Contents of container 2
</div>
<div style="z-index:902;">
Contents of container 3
</div>
See this working Fiddle example!
z-index only works with positioned elements (e.g. position:absolute;, position:relative;, and position:fixed;).
An element is said to be positioned if its position property has a value other than static.
~ Visual Formatting Model of CSS 2.1 Specification
You have given your overlay a width and height of 100%, and since it is a direct descendant of container 1, its width will be calculated to be 100% of the width and height of container 1, thus explaining your problem.
As for a solution, you should probably set the width and height of the overlay to an absolute pixel value for the size of the browser window in JavaScript, prior to showing it.
This code worked for me in firefox:
<div style="z-index:1;">
<div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index:901;">
Overlay
</div>
Contents of container 1
</div>
<div style="z-index:1;">
Contents of container 2
</div>
<div style="z-index:1;">
Contents of container 3
</div>
So try it out and see if it works for you.
Here is my solution... Imagine two sibling divs. #in-front needs to rest on top of #behind.
<div id="behind"></div>
<div id="in-front"></div>
Instead of having them be siblings, wrap the first div inside a wrapper and set it's positioning to fixed.
<div id="wrapper" style="position:fixed; width:100%; top:0; left:0;">
<div id="behind"></div>
</div>
<div id="in-front"></div>
The #behind div can now position or center itself however it wants. Look at this jsfiddle for an example. Notice how they work together with no negative margins!
if i mix position relative and absolute width z-index this make no sense:
<div style=" Position: fixed ; z-index:902; width:100%; heigth:100%;background:#F00;">
Contents of container 2
</div>
<div style="z-index:1; position:relative">
<div style=" z-index:903; Position: fixed ; left: 0; top: 0;background:#ccc;">
Overlay
</div>
</div>
http://jsfiddle.net/vLp0am43/
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}