HTML
<div id="galerie">
<div id="stanga">
</div>
</div>
CSS
#galerie {
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:20px;
margin-left: 0px;
}
I want my red square to have margin-top:10px from the yellow container.
http://jsfiddle.net/97fzwuxh/16/
Margins will collapse by design, So your inner margin have effect on your outer div.
add overflow:auto to your #galerie style
or
add padding:1px to your #galerie style
Your problem is called adjoining
Two margins are adjoinin of a box and top margin of its first in-flow child, if both belong to vertically-adjacent box edges
The margins are not working because they are collapsing, use:
position: relative;
top: 20px;
Here the updated fiddle: "http://jsfiddle.net/97fzwuxh/18/"
You can use absolute for this.
#galerie {
position: relative;
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
margin-top: 10px;
margin-left: 0px;
}
You need position: relative on the outer element(#galerie)
and position: absolute on the inner element(#stanga)
#galerie {
width: 974px;
height: 500px;
background-color:yellow;
position: relative;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:200px;
position: absolute;
}
Here is the updated working fiddle:
http://jsfiddle.net/97fzwuxh/19/
Also, read this article I found it very useful: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
TLDR: A page element with relative positioning gives you the control to absolutely position children elements inside of it.
Related
I have 2 divs, parent and child, I want that child left side (left border) will in center of parent.
Why this code not working? that is left: 50% for child, is not working.
<div id="outher">
<div id="inner">
</div>
</div>
css:
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
}
demo http://jsfiddle.net/vrse2/5/
You need to set position to absolute or relative:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
CSS left only works with positioned elements.
Quoted from W3C
Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to positioned elements
Inherited No
Try
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Good read
MDN : CSS Reference -left (Best IMHO)
W3C : CSS/Properties/left
You need to add position: absolute; to your CSS. left is used for absolute positioning.
In your case:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Use:
margin-left: 50%;
Or:
position:relative;
left:50%;
Try With the following :
HTML Part :
<div id="outher">
<div id="inner">
</div>
</div>
CSS Part :
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
margin:0 auto;
position: absolute;
}
I think this may help you to resolve your problem.
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
I try to align a div at the bottom of a parent div. I tried the following:
JS Fiddle
I thought it would work with:
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
}
But as you can see in the fiddle it does not work. How can i do it?
You need to give a width to it as well. also you should use position: relative on the parent (the default is static). See updated fiddle: http://jsfiddle.net/wuf0m41z/1/
You could also specify right and left properties, and set them to 0, instead of setting width exclusively:
HTML:
<div class="container">
<div class="top-menu"></div>
<div class="bottom-menu"></div>
</div>
CSS:
.container {
height: 400px;
background-color: green;
position:relative;
}
.top-menu, .bottom-menu {
height: 50px;
background-color: yellow;
}
.bottom-menu {
position: absolute;
bottom: 0;
right:0;
left:0;
}
JSFiddle
just add the position:relative; to your container and don't forgetto add a width:100%; to your bottom menu.
here is an example:
http://jsfiddle.net/leojavier/wuf0m41z/10/
Try it !!!
.container {
height: 400px;
position: relative;
background-color: green;}
.top-menu {
height: 50px;
background-color: yellow;}
.bottom-menu {
height: 50px;
background-color: yellow;
position:absolute;
bottom:0;
width:100%;}
Your code is correct now just have to add width.
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
width:100%;
}
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
Very basic question here, but it has been puzzling me for hours:
How do I make a relatively positioned div span its absolutely positioned content?
http://jsfiddle.net/X6ay2/10/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
You can't directly really, as absolute positioned elements are out of the document flow and so don't really 'belong' to their parents anymore. A kind of workaround though is to set the absolute positioned div to 100% width and left:0, which will force it to extend to the width of the parent.
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 100%;
left: 0;
height: 50px;
background: red;
}
http://jsfiddle.net/X6ay2/14/
A caveat to this is if the inner div has padding, it will extend beyond 100%. To stop this, make the inner div use the border-box box-sizing property.
.inner {
padding: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
http://jsfiddle.net/X6ay2/15/
set width of the outer to suit your needs. The example has
width:50px
http://jsfiddle.net/X6ay2/12/