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;
}
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>
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 am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
Could you please give a html code for the following?
I need to display div and iframe horizontally fitting the whole page. But I need div to be fixed size (100px) and iframe fitting the remaining space.
Thanks
Fiddle
CSS
div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}
HTML
<div>hi</div>
<iframe src="http://www.google.com/"></iframe>
EDIT:
To avoid horizontal scrollbar define width in % to both the elements - Updated Fiddle
http://jsfiddle.net/gZNKk/1/
<html><head>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#left {
float: left;
width: 100px;
background: blue;
height: 100%;
}
#right {
width: auto; /* This is the default */
float: none;
margin-left: 100px;
background: red;
height: 100%;
}
#right-iframe {
background: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<iframe id="right-iframe"></iframe>
</div>
</body></html>
EDIT: Fixed the extra spacing on the right causing the scrollbar to appear.
CSS:
#content-wrapper {
width: 100%;
overflow:hidden;
}
#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}
#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}
HTML:
<div id='content-wrapper'>
<div id='content-left'></div>
<div id='content-right'><iframe src="http://www.google.com"></div>
</div>
Width you can adjust, whatever you required.
Try this,
http://jsfiddle.net/anglimass/UUmsP/15/
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 }