CSS - Centering a page - then making the page 100% height - css

I'm trying to center a page and then make it 100% in height.
I have a div called "content" as the parent element of all elements in the HTML page.
What do I need to do next? I'd like to stay away from any CSS-hacks.
This is currently working in IE7, but not in Firefox 3.
EDIT: I added height: 100%; to #content that's what made it work in IE. Firefox still not solved.
My stylesheet so far is:
html, body
{
width: 100%;
height: 100%;
}
body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
position: relative;
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 840px;
height: 100%;
padding: 0px 5px 5px 5px;
}

To center content, put it inside of an element that has a fixed width (important!) and has margin: auto;
There is no cross-browser was to make your div have 100% height unless you use javascript. If you are desperate for this functionality and are willing to use javascript, you can dynamically set the height of your content by setting it to the window height. I've never done this so I won't tell you how exactly, but it should be easy to find by googling.

Ahah! Think I got it for now. This works in Firefox 3 and IE7. I will test on some other browsers later. I do still need to figure out adding some padding around my content.
This requires this heirarchy on my page
html
|__body
|__div id=container
|__div id=content
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container
{
position: absolute;
text-align: center;
background-color: #000;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
#content
{
text-align: left;
background-color: #fff;
margin: 0px auto;
width: 830px; /* padding thing I'm working on */
height: 100%;
}

body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 90%;
height: 100%;
padding: 0px 5px 5px 5px;
}
Try this. This will work. Remove the html,body selector, you don't need that.

This works for me in Firefox 3 & Safari 3. Don't have access to IE.
html{
position:absolute;
top:0;
bottom:-1px;
left:0;
right:0;
height:100%;
text-align:center;
}
body{
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:0;
min-height:100%;
min-width:30em;
max-width:50em;
width:expression("40em");/*IE doesn't support max/min width*/
padding:0 1em 0 1em;
}

This should do it better.
No extra markup and/or id.
No need for javascript and/or expression in css.
Should work fine on all browsers.
<style>
html
{
background-color:red;
margin:0;
padding:0;
border:0px;
}
body{
background-color:yellow;
position:absolute;
left:-400px; /* 50% of content width */
width:800px; /* your content width */
margin-left:50%;
margin-top:0;
margin-bottom:0;
top:0;
bottom:0;
border:0;
padding:0
}
</style>

For centering the page, I typically just put the content div in the center tag, because margin-left/right:auto really doesn't work in all versions of IE.
For making the page the whole height, you can fake it a couple of ways. My favorite is to create a background image for the body tag that is centered horizontally but tiles vertically, so that would give the main div its white background. You probably still have a footer though, so you can position it with bottom:0 and that should keep it at the bottom and give you a content div which appears to extend for the whole page.

Related

Vertically centering <div>s with multiple lines

I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/

css container height different in firefox?

I’m having problems with my CSS. Basically I have a <div> called container which holds all the content of my site. The container runs parallel to a right hand margin of other stuff.
I need the two to align correctly at the bottom. Chrome and Safari show the container height the same and the right hand margin and container both align but in firefox the container is shorter than the right hand margin. Is there anyway I can set a seperate css condition for firefox or another way because it looks silly.
I have tried using height 100% but I can’t use this because I have javascript and other stuff which is hidden and fades in and other reasons.
#container {
/* [disabled]overflow: hidden;
*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
body {
/* [disabled]margin-right: auto; */
/* [disabled]margin-left: auto; */
/* [disabled]width: 1010px; */
font-size: 11px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#3F3F3F;
background-color: #F3F3F3;
margin-top: 20px;
overflow:auto;
/* [disabled]float: left; */
}
You could try something like that:
HTML
<div>HEADER</div>
<div class="container">
<div class="content">
<p>Content Area</p>
<p>row#2</p>
<p>row#3</p>
<p>row#4</p>
<p>row#5</p>
<p>row#6</p>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<div>FOOTER</div>
CSS
.container {
width: 960px;
padding: 10px 20px 20px;
margin: 0 auto;
overflow: hidden;
}
.content, .sidebar {
float: left;
padding: 1%;
padding-bottom: 100%;
margin-bottom: -100%;
}
.content {
width: 68%;
background-color: red;
}
.sidebar {
width: 28%;
background-color: green;
}
This should align the two columns to the same height.
I've made a demo you can try.
EDIT: maybe you could take a look at the article on CSS-Tricks that talk about different valid alternative methods.
Without HTML it's tough to say exactly. What about putting both in a wrapper div that has a definite pixel height, then your #content and #margin divs at 100% height?
#wrapper{
width: 100%;
height: your height in px;
}
#container {
/* [disabled]overflow: hidden;
*/
height: 100%;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#margin{
height:100%;
}
Also, play with all of your CSS in firebug to troubleshoot this. Removing attributes one by one to find a possible problem.

Why does my footer go all the way down?

The site is here:
http://www.cottonbrewing.com/members
It's fine if the content doesn't require the page the scroll.
CSS:
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
margin: 0 auto;
font-size: 12px;
font-weight: normal;
clear:both;
padding: 10px 0px 10px 0px;
text-align: center;
}
Edit 1: I must also make sure the footer is at the absolute bottom if the content is small, such as you see here: http://www.cottonbrewing.com/ that the footer is at the bottom.
Change position:absolute; to position:relative;
ADDITION
In response to the comment, follow these guidelines for a "sticky footer":
Body
body
{
height:100%;
}
Your container div:
#container
{
min-height: 100%;
position: relative;
}
Your footer div:
#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 30px; /* can be changed, along with padding */
}
Delete bottom:0; and change the position to relative.

Vertical centering working in almost every browser, but not in IE7

It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>

Trying to force a div to the top of a page

Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.

Resources