I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)
My code so far looks like this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content">
hello world!
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
Solution #1:
Replace position: absolute; with position: relative; in #content(CSS).
JSFiddle - DEMO and Full Screen View
body, html {
background-color:#FFF;
height:100%;
}
#content {
width:980px;
height: 100%;
background-color:#FCC;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
text-align:center;
}
<div id="content">hello world!</div>
More Info about margin: 0 auto; center to work:
What, exactly, is needed for margin: 0 auto; to work?
Solution #2:
Add left: 50%; and margin-left: -490px; (half width of #content div) to #content
JSFiddle - DEMO and Full Screen View
#content {
width: 980px;
background-color: #FCC;
position: absolute;
display: block;
top: 0px;
bottom: 0px;
margin-left: -490px;
left: 50%;
text-align: center;
}
Container is in center you need to align text in the center if you want,
align:center
should be
text-align:center;
Demo
Are you trying to center the "Hello world" text?? If add
text-align: center;
Instead of
align:center;
You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.
If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.
Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
hello world!
</div>
</div>
</body>
</html>
With this CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#wrapper {
position: relative; /* Needs to be there, for the #content-container to know,
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
The other way is just to replace this from your code:
position: absolute;
top: 0px;
bottom:0px;
With this:
position: relative;
Then your code should work as well...
Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...
Related
I've used the search function and it just will not center as I cannot make sense of some suggestions and those I can do not work. Google leaves me no results either.
I want to use 1 div as a 'background as such' so that the first 150px of the screen down are blue.
Then I want the logo in a centered box 950px wide by 150px down.
The 'logo div' (I've called it headercontent) needs to be 'on top' of the headerbackgroundblue div, which I have managed.
However it will not center the box within that div (950px wide centered will store all content so that it looks good on all screens, however the blue is 1920px wide to make the website look better on larger resolutions.
CSS
body {
padding: 0;
margin: 0;
}
.headercontent {
z-index: 2;
position: absolute;
height: 150px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin-right: auto;
margin-left: auto;
background-color: #3c56a6;
z-index: 1;
position: absolute;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kleenzone - Commercial Cleaning Services</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bluebackgroundtop"></div>
<div class="headercontent">
<H1> KLEENZONE </H1>
</div>
</body>
</html>
You need to have the .headerContent inside of the .bluebackgroundtop div, and then style like this:
* {
padding: 0;
margin: 0;
}
.headercontent {
height: 150px;
width: 950px;
margin:0 auto;
text-align:center;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin:0 auto;
background-color: #3c56a6;
}
DEMO
Can someone explain me why the first code does result in a fixed footer with a small margin on the right as I used an extra 'div' but that without this as seen in the second code it doesn't show a margin on the right? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
.mymargin {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
}
footer {
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooterwithmargin-ontheright
</footer>
</div>
</body>
</html>
Second code without an extra div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooter NO hmargin-ontheright
</footer>
</div>
</body>
</html>
Try right instead of margin-right:
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
right: 20px;
}
jsfiddle: http://jsfiddle.net/ashishanexpert/3eFPt/
Your footer tag is already taking 100% of the width.. So margin will be out of it.
It worked in the first case because you gave the width to the parent. so margin on the child worked. try to add 100% to footer in first case and even that wont work as required.
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
Have been trying to fix this problem I have here. Basically I have a website that has a background. Ontop of this background I have an centered image, lets call this image1. Exactly on top of image1 i want to draw image2. So basically I have a background which I want to draw two centered images ontop. I call them centeredImage and overlayImage.
Thank you for the help!
Best regards, Lukas
here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media=screen>
body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
height:1515;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.overlayImage1
{
position:absolute;
left:0px;
top: 0px;
z-index: 1;
}
.overlayImage2
{
position:absolute;
left:0px;
top: 0px;
z-index: 2;
}
</style>
<title>A dream within a dream</title>
</head>
<body>
<!-- PAGE BEGINS -->
<div class= "containerPage">
<!-- BACKGROUND IMAGE -->
<img class="overlayImage1" src="column.gif" unselectable="on" height="1515" width="1024"/>
<img class="overlayImage2" src="webSite_split_page1.gif" height="1515" width="1024"/>
<!-- CONTENT BEGINS -->
<!-- LEFT SIDE -->
</div>
</body>
</html>
I see what you are after now. Try this. You will need to tweak the top value to get the correct vertical alignment.
http://jsfiddle.net/frV3D/
body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.centeredImage { display: block; margin: 0 auto; }
.overlayImage {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px; /* Half the height */
margin-left: -150px; /* Half the width */
}
Give a position value to anything you want to provide a z-index to - in this case your .centeredImage.
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>