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.
Related
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
How to shift a child block?
How to shift the blue block so that it stretches the parent block?
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
top: 350px;
}
<div class="main">
<div class="preMain">
</div>
</div>
Your issue is that your child block has position: absolute; meaning it no longer affects the parent div. If you want to shift the child block down but still have it affect the parent block you need to change the position of the child. Try something like this:
.main {
width: 400px;
min-height: 300px;
background: red;
position: absolute;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: relative;
margin: 350px 0px 10px 10px;
}
Admittedly not a perfect solution but you should be able to achieve the result you're looking for.
Alternately, look to this post here
Hope this helps.
You are using position: absolute, which allows to use bottom and left to position the element correctly.
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
bottom: 10px;
left: 10px
}
<div class="main">
<div class="preMain">
</div>
</div>
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.
I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle
HTML
<div id='parent'>
<div id='child'>
</div>
</div>
CSS
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
The solution is to use transform: translate(-50%, -50%) on the child div, like so:
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/jwoy7rxr/
This works because the transform positions the item based on a percentage from it's own point of origin.
Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 115px auto;
border-radius: 50%;
}
Here's the fiddle: https://jsfiddle.net/Lr3fLser/
You need to give the parent:
#parent {
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
#child {
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
}
You need the display table-cell in order to use the vertical-align.
Then add align="center" to the parent div's:
<div align="center" id="parent">
<div id='child'>
</div>
</div>
I have the updated JSFiddle attached:
https://jsfiddle.net/o7pzvtj3/2/
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}