I am CSS beginner, want to create simple box and put another box exacly center of first box,
tried something like this
#first {
width: 100px;
height: 100px;
background: red;
}
#first #second{
width: 50%;
height: 50%;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
but not as expected.
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: green;
}
Fiddle
Problem:
The issue you are having is that by default, your child elements align themselves to the top left of their parent element, and not in the center as you are expecting. In order to position your child element in the center (horizontally), you could use the css of:
margin: 0 auto;
which will place it horizontally in the middle.
Vertically aligning is slightly more difficult, as it involves ensuring it to be the correct from both top and bottom of your parent, so you could use:
top: 25%;
However, this should really only be used if your child is positioned in accordance to your parent div, and so we need to include position:absolute; into our child element.
However, if we do this, then it would be more beneficial to set it using both left and top properties, like so (in our child element):
position: absolute;
left:25%;
top:25%;
So, using this we come to our first solution:
Solution 1: Using positioning
By using absolute positioning, and making your parent have relative positioning, this will solve your problem.
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
position: absolute;
width: 50%;
height: 50%;
background: green;
left: 25%;
top: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
Solution 2: Pseudo Effects
You may also want to use pseudo effects to reduce your markup (makes the page load slightly faster), and so we could use pseudo effects to a great beneficial degree (since we only use a single element instead of two):
This is shown below:
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first:after {
content:"";
width: 50%;
height: 50%;
background: green;
position: absolute;
left:25%;
top:25%;
}
<div id="first"></div>
One way is to use auto margin with absolute positioning:
#first #second {
width: 50%;
height: 50%;
position: absolute;
margin: auto;
background: green;
top :0; left: 0; right: 0; bottom: 0;
}
Demo: http://jsfiddle.net/gzterxrd/
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
width: 50%;
height: 50%;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="first">
<div id="second"></div>
</div>
Or you can also use border
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
border:15px solid red;
}
<div id="first"></div>
or you can also use pseudo element
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
margin:50px;
}
#first:after{
content:'';
background: red;
position:absolute;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
z-index:-1;
}
<div id="first">
</div>
You can do something like this
#second {
width: 60px;
margin: auto;
background-color: green;
}
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.
This, this, and this question were similar but did not help.
The goal is to center an element under its parent using percentages, not absolute values. This way, position values do not need to change if sizes change.
The hover element below is centered under outer, but positioning requires absolute values that depend on the sizes of hover and outer. If either change, the position values must change.
Can centering underneath a parent be achieved with percentages?
Codepen: https://codepen.io/anon/pen/dadjpg
<div id="outer">
<div id="hover"></div>
</div>
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
margin: auto;
left: 75px;
bottom: -50px;
}
You can also use top:100%; left:0px; right:0px; margin:0px auto;
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:0px;
right:0px;
top:100%;
margin:0px auto;
}
<div id="outer">
<div id="hover"></div>
</div>
You can use top:100% to move the element to the bottom then simply combine left:50% with translateX(-50%) to center:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:50%;
transform:translateX(-50%);
top:100%;
}
<div id="outer">
<div id="hover"></div>
</div>
Same logic considering bottom:0
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
bottom:0;
left:50%;
transform:translate(-50%,100%);
}
<div id="outer">
<div id="hover"></div>
</div>
Another idea is to consider flexbox to center inside the element then translate to make the element outside:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
display:flex;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
margin:auto auto 0;
transform:translateY(100%);
}
<div id="outer">
<div id="hover"></div>
</div>
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/
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
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.