How do I position an element absolutely from the top, but relatively from the sides.
I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.
I tried the following CSS, but it was not working.
position: absolute; top: 105px;
margin: 0 auto;
Thank you.
I would place it inside a container that had absolute positioning, and then make it's postition relative to that.
#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }
Then just:
<div id="container">
<div id="box">
</div>
</div>
This is just off the top of my head.
Live Demo
<style type="text/css">
div { padding: 5px; }
#outer {
border: 1px dotted #F00;
position: absolute;
top: 105px;
right: 0px;
left: 0px;
}
#inner {
border: 1px dotted #0F0;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
<div id="outer">
<div id="inner">Banner</div>
</div>
If it has a known, fixed width, set the margin-left to negative half the overall width:
#banner { position:absolute; width:400px; left:50%; margin-left:-200px }
Related
So I have a container over my div element, but I can't remove it. I have to adjust the div below so I get rid of the white spaces on left and right using negative margins. However when I am trying to add negative margin from left and right, the div shifts only to left. What am I doing wrong?
body {
margin: 0px;
}
.container {
padding: 0px 20px;
}
.background {
height: 650px;
width: 100%;
background: red;
margin: 0px -20px;
}
<div class="container">
<div class="background">
test
</div>
</div>
body {
margin: 0px;
}
.container {
padding: 0px 20px;
position: relative;
}
.background {
position: absolute;
top: 0;
left:0;
right: 0;
bottom:0;
height: 650px;
width: 100%;
background: red;
}
<div class="container">
<div class="background">
test
</div>
</div>
I want a div which is centered vertically and horizontally i.e. in the centre of a page. I tried position: absolute and making the div's top right bottom left 0! But the problem is when i zoom in the page it overlaps with other header and other divs! PLEASE HELP ME! How can i position the div at centre of a page without overlapping other divs while zooming in the page?
Like i have tried:
.center{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Try,
html{
height:100%;
}
body
{ height:100%;
background-color: #fcfcfc;
}
.center
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
}
<div class="center"></div>
html, body {
height:100%;
}
.center {
border: 2px solid blue;
margin: auto;
position: relative;
text-align: center;
top: 50%;
width: 20%;
}
<div class="center">
<p>Test Text</p>
</div>
To horizontally center a block element (like div), use margin: auto
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
2020.4.23
coping from real project
html, body {
display:flex;
height: 100%;
width: 100%;
margin: 0;
}
<div id="id01" style="width: 50%;height: 30%;background-color: red; margin: auto;">
</div>
Try This
HTML
<div class="center">
Lorem ipsum dolor sit amet,
</div>
CSS
html,body{
height:100%;
}
.center{
position: relative;
top:50%;
left:50%;
}
Link for reference
Hope this Helps..
Flex is the best solution, perfect position.
If you want this for a loader, just do a full size div with position fixed and use flex for the div content.
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body, html {
height:100%
}
body {
display:flex;
margin:0;
flex-direction:column;
}
.mydiv {
margin:auto;
}
<div class="mydiv">test</div>
This is Your HTML Body
<div class="testbox">
<!-- Your div body -->
</div>
This is Your CSS
.testbox {
width: 800px;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I'm new to CSS. I'm trying to position a div (#inner) in the bottom-right corner of another div (#container).
I wrote float: right; but when running the Html I see the inner div in the bottom-left corner of the container. Why is that? What's wrong with the code?
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
}
#inner {
position: absolute;
border: solid;
bottom: 0;
float: right;
width: 30%;
height: 30%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
Using float with absolute positioning doesn't really make sense. I think what you want is right:0 instead of float:right
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
overflow: auto;
}
#inner {
position: absolute;
border: solid;
bottom: 0;
right:0;
width: 30%;
height: 30%;
}
body,
html {
height: 100%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
Just remove the absolute position. Also, if you want the container to wrap the float/s, add "overflow: auto" to the container element:
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
overflow: auto;
}
#inner {
border: solid;
bottom: 0;
float: right;
width: 30%;
height: 30%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
you must remove "position: absolute"
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
I have a a design problem. I have a centered logo on a page, What I want is a div centered between the left side of the page and te left side of the logo.
how could I achieve this using only css ?
Here is the example:
Take a look at this demo...
http://jsfiddle.net/UnsungHero97/7Z5fu/
HTML
<div id="wrapper">
<div id="box-left">
<div id="left"></div>
</div>
<div id="box-center">
<div id="center"></div>
</div>
</div>
CSS
html, body {
margin: 0 !important;
padding: 0 !important;
}
#wrapper {
width: 100%;
}
#box-center, #box-left {
width: 50%;
float: left;
}
#left {
border: 1px solid magenta;
height: 50px;
width: 50px;
position: relative;
left: 50%;
/* half of width of #left + half of margin-left of #center */
margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}
#center {
border: 1px solid magenta;
height: 50px;
width: 200px;
margin-left: -100px;
}
I hope this helps.
It will work if the logo width can be fixed, here’s the code.
HTML:
<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
CSS:
#logo {
width: 100px;
height: 50px;
position: absolute;
top: 50px;
left: 50%;
margin-left: -50px;
text-align: center;
}
#otherdiv {
text-align: center;
position: absolute;
top: 50px;
left: 0;
width: 50%;
margin-left: -50px; /* Half of the logo width */
}
#logo img,
#otherdiv img {
width: 100px;
}
#otherdiv img {
margin-left: 50px; /* Half of the logo width */
}
Here i have separate two divs that left and right, there is one div inside of the leftDiv that is X_div make it as width:20% and margin:0 auto. if resolution extend, x_div will also extend as per your requirement.
#leftDiv {
width:30%;
height:auto;
}
#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}
#rightDiv {
width:70%;
height:auto;
}