This question already has answers here:
Center aligning a fixed position div
(16 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
I have two 50% width divs and want to make a div(which is inside one of them) to be position fixed and center.
I have created a codepen. Please have a look at it to get a better idea about the problem. Also I have embed my code here as well.
<div class="parent">
<div class="first">
<p>...</p>
</div>
<div class="second">
<p>...</p>
<div class="floating"></div>
</div>
</div>
.parent {
display: flex;
width: 100%
}
p {
color: #fff;
padding: 20px;
}
.first {
width: 50%;
height: 100vh;
background-color: #000;
}
.second {
width: 50%;
height: 100vh;
background-color: #ddd;
}
.floating {
width: 100px;
height: 100px;
background-color: #fff;
position: fixed;
}
PS I know its possible with position sticky but I don't want to use it. You can add the below code in .floating class and it will be in center.
position: sticky;
margin: 0 auto;
Use transform: translate(-50%) with left: 50%:
.centered {
background: forestgreen;
width: 400px;
height: 100px;
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="centered"></div>
`
Set the position relative to second element and than set the box in center with position absolute like this:
.second {
position: relative;
width: 50%;
height: 100vh;
background-color: #ddd;
}
.floating {
width: 100px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
You can use position:
<div class="parent">
<div class="first">
</div>
<div class="second">
</div>
<div class="floating"></div>
</div>
You can show full code in JSFIDDLE
Related
Here is the JSFIddle
I understand that the extra-height is the height of the child-2 div if it was positioned static.
How can we contract the parent height so that it fits the child divs?
HTML:
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
CSS:
.parent {
width: 200px;
background-color: #ddd;
}
.child-1 {
width: 100%;
height: 40px;
background-color: #aaa;
}
.child-2 {
position: relative;
left: 50%;
transform: translateX(-50%);
top: -20px;
width: 40px;
height: 40px;
background-color: #555;
}
The parent has extended hight because postion:relative elements still occupy their original space in normal flow.
In order to contract the parent you've to take it out if normal flow, one way to do this is to apply position:absolute to the child, and then position it relative to the parent by giving it position:relative
.parent {
position: relative;
width: 200px;
background-color: #ddd;
}
.child-1 {
width: 100%;
height: 40px;
background-color: #aaa;
}
.child-2 {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background-color: #555;
}
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
Hello! I would like to accomplish this with a circle div. I know how to accomplish positioning with absolute and relative in 1 div, but if i want to make this out of two divs and make the circle overlapping these two divs is there any easy/smart way to go in CSS?
Hope it helps
body {
margin: 0px;
}
.top,
.bottom {
width: 100%;
height: 100px;
}
.top {
background: red;
}
.bottom {
background: black;
}
.circle {
background: green;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50vh;
}
<div class="top"></div>
<div class="bottom"></div>
<div class="circle"></div>
Is it possible in CSS to achieve the following:
With the following being the html and css:
<div class="preview">
<img src="/big-ass-image.png" width="150" height="500" border="0"/>
</div>
.preview {
width: 200px;
height: 100px;
}
So that only the part of the image in the div (gray box in the mockup above) is showing, and the middle part of the image is shown with the rest cut off.
Hopefully this helps you with your query. If you have any questions, drop a comment and I'll try to amend my post to suit your needs.
.preview {
background: red;
width: 200px;
max-height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.preview:hover {
overflow: visible;
}
.preview img {
width: 150px;
}
<div class="preview">
<img src="http://placehold.it/150x150">
</div>
One solution would be to use position: absolute on image and center it with transform: translate and set overflow: hidden on parent.
.preview {
width: 200px;
height: 50px;
border: 1px solid black;
position: relative;
overflow: hidden;
margin: 50px;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.preview:hover {
overflow: visible
}
<div class="preview">
<img src="http://placehold.it/150x150">
</div>
#first {
position: relative;
width: 20%;
height: 20%;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
border-radius: 50%;
background-color: blue;
}
<html>
<body>
<div id="first">
<div id="second">
</div>
</div>
</body>
</html>
How to get it i want the second div in the exact center of the first div but it is not even visible. how achieve this without using left, top attributes.
note:i wants align it only using css but not using tag.
To center absolutely positioned div with known width, you can use this:
.inner1 {
left: 0;
right: 0;
margin: auto;
}
Or, if you need to center it both horizontally and vertically:
.inner2 {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
If width of inner is unknown - use css3 transforms:
.inner3 {
left: 50%;
transform: translateX(-50%);
top: 0;
}
Ant for vertical centering also:
.inner4 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Fiddle demo: https://jsfiddle.net/4qxpc0ua/
calculate the top and left position and apply it for the second div.
#first {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
left:42.5%; //50% - (15% / 2)
top:42.5%; //50% - (15% / 2)
border-radius: 50%;
background-color: blue;
}
DEMO
There are several possibilities to do what you want:
.outer {
background: lightblue;
width: 300px;
height: 100px;
}
.inner {
background: black;
width: 100px;
height: 50px;
color: white;
}
<div class="outer" align="center">
<div class="inner">
Deprecated (use css)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="position: relative; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer" style="position: relative">
<div class="inner" style="position: absolute; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="margin: 0 auto;">
</div>
</div>
Another solution
.outer {
width: 100%;
text-align: center;
}
.inner {
display: inline-block;
}
I'm trying to create a wrapper with in it 4 divs next to each other (two next to each other and below them the remaining two). However the problem is, is that only the fourth one is showing itself. I've tried setting the overflow: hidden, toy with the display property and also tried to use float:left and float:right. Yet so far no luck.
This is the css I'm using:
html, body{
width: 100%;
height: 100%;
}
#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px solid #000;
}
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
}
#four{
background-color: yellow;
width: 50%;
position: absolute;
height: 50%;
}
and this is the html code that goes with it:
<html><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>
<div id="wrapper">
<div id="one">a</div>
<div id="two">b</div>
<div id="three">c</div>
<div id="four">d</div>
</div>
</body></html>
Can anyone figure out why the yellow (four) div is the only one showing itself, even if I let it float right and others left? (Besides I'm also wondering why there are scrollbars appearing because of the width: 100% and height: 100% in the html,body part.)
Float your inner elements. See here:
http://jsfiddle.net/dkGBA/1/
Main changes:
.child
{
width: 50%;
height: 50%;
float: left;
}
<div id="one" class="child">a</div>
<div id="two" class="child">b</div>
<div id="three" class="child">c</div>
<div id="four" class="child">d</div>
That's because you set the position to absolute on all four of your divs. You then have to position them using top, bottom, right, or left. When you position an element absolutely, it gets taken out of the flow of the document.
jsFiddle example
CSS
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
right:0;
top:0;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
left:0;
bottom:0;
}
#four{
background-color: yellow;
width: 50%;
bottom:0;
right:0%;
position: absolute;
height: 50%;
}
A second option is to remove the absolute positioning, and float them all left.
jsFiddle example
CSS:
#one,#two,#three,#four {
float:left;
}
Don't use position for this, but instead use floats.
Example:
http://jsbin.com/ucofed/edit