How to put a div in center of browser both vertically and horizontally using CSS only?
Make sure it works on IE7 too.
If everything fails, we may use JavaScript, but a last choice.
HTML:
<div id="something">... content ...</div>
CSS:
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The simplest solution is just to use an auto margin, and give your div a fixed width and height. This will work in IE7, FF, Opera, Safari, and Chrome:
HTML:
<body>
<div class="centered">...</div>
</body>
CSS:
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT!! Sorry, I just noticed you said vertically...the default "auto" margin for top and bottom is zero...so this will only center it horizontally. The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer.
margin: auto;
try this
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Using this:
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
You can also set your div with the following:
#something {width: 400px; margin: auto;}
With that setting, the div will have a set width, and the margin and either side will automatically set depending on the with of the browser.
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
Tested in FF2-3, IE6-7, Opera and works well!
.center {
margin: auto;
margin-top: 15vh;
}
Should do the trick
<center>
<h3 > your div goes here!</h3>
</center>
For Older browsers, you need to add this line on top of HTML doc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Related
I'm trying to understand the trick in https://www.google.com/.
The bottom bar has position: absolute; bottom: 0; but if you minimize window's height it stays ("stacks") under the logo/input.
Of course this is something doable with js but is it with pure CSS?
My question is is there any CSS trick that can create this "stack effect", if so how can this be done?
I tried to understand if the <span>Google Logo</span> <div>Bottom bar</div> does the trick but I guess no.
A clean way of doing this is to set a bottom margin on the body that is equal to the footer height.
Here's your css:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
And the HTML:
<html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Here's an example of this approach: http://mystrd.at/data/sticky_footer.html
It's because they set a padding-bottom value equal to the height of the footer in order to displace it.
.content {
padding-bottom: 35px;
}
See.. padding-bottom:35px = height:35px
#footer {
bottom: 0;
font-size: 10pt;
height: 35px;
position: absolute;
width: 100%;
}
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
I cant seem to be able to center #testmenu no matter what... I've tried dozens of combinations in CSS but without luck. Please take a minute to have a look and save my hair from being completely pulled out.
#abc {
position:absolute;
bottom: 0;
width:100%;
left:0;
text-align:center; /* IE 5.x centering */
}
#testmenu {
line-height:2em;
width:960px;
color:#FFF;
background:#00F;
background:#C00;
margin:0 auto;
}
<div id="abc">
<div id="testmenu">
This should remain 'fixed' bottom center.
</div>
</div>
Here's a simple jsfiddle of what I'm after: http://jsfiddle.net/mXTmF and also working demo of the page: http://ht-webcreations.com/vildiridis/index.php
The problem is that you can't apply auto margins to a fixed element. To allow for varying menu widths, I'd do this:
#abc {
bottom: 0;
height: 30px; /* forces #testmenu to the bottom */
margin: 0 auto;
position: fixed;
width: 100%;
}
#testmenu {
background: none repeat scroll 0 0 #FF0000;
bottom: 0;
font-size: 10px;
height: 30px;
overflow: hidden; /* prevents extra space underneath from 33px-high menu items */
margin: 0 auto;
max-width: 1000px;
width: 960px;
}
Things are quite straightforward, since you're using a fixed width for the menu. Add the following CSS on your #testmenu:
position: relative;
left: 50%;
margin-left: -480px;
You can see a working demo here > http://jsfiddle.net/mXTmF/1/
<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:960px; height:200px; position:absolute; left:50%; bottom: 100px; margin-left:-480px;'>hallo</div>
</body>
</html>
in Css
#testmenu {
width: 960px;
position: absolute;
left: 50%;
bottom: 100px;
margin-left:-480px;
}
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
I have the following code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
If you test this in any other browser than IE you will see a red box and a textarea that fills the entire area with a 20px padding around it. However in IE (all versions) it will just show a tiny textarea.
The reason I am doing it this way is because I will be using the same effect for a popup that fills the screen and therefore the size is unknown which is why I just specify the position rather than using width and height.
How do I fix this to get it working in IE? jquery perhaps?
Just to confirm using width:100%;height:100%; will not work in this instance
The problem is that <textarea> is a replaced element and has an intrinsic width and there are rules - CSS2.1:10.3.8 - that govern what the eventual width will be. Ironically, Webkit is at fault here and Gecko is doing it right.
Using this CSS will make it work in Firefox3+, Safari and Opera and IE8+ which is unfortunate as you want it working from IE6 upwards.
IE6 and IE7 at least render the <textarea> at the correct width, so it is just the height that is incorrect. I strongly suggest that IE6/7 be left in this state since the <textarea> is usable. Progressive enhancement here allows modern browsers to render the box in a more accessible way but old browsers are still usable. Failing that, a quick, simple JavaScript function could be used to to set the height for IE6/7 if it must look the same in all browsers.
div#container {
position:relative;
top:100px;
left:100px;
width:600px;
height:440px;
background: #ff0000;
padding:20px;
}
textarea {
position:relative;
width:100%;
height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Reference articles used for this answer
Absolutely positioned textareas
Firefox / IE textarea sizing quirk - workarounds?
there you go (you need to "play" with the textarea width percentage) you can hide the scrollbar with overflow:hidden;
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
textarea
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
width:93%;
height:92%;
}
</style>
</head>
<body>
<div id="container">
<textarea></textarea>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div#container
{
position: relative;
top: 100px;
left: 100px;
width: 640px;
height: 480px;
background: #ff0000;
}
.box
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
textarea
{
overflow-y: scroll;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<textarea></textarea>
</div>
</div>
</body>
</html>