Header Div Disappears in Large Resolution - Media Query - html

I am trying to put in a different image for each resolution. It worked for normal screen and smartphones, however I cannot get it to show up for the large resolution screens. Here are the relevant sections of code:
CSS:
/* Large screens ----------- */
#media only screen
and (min-width : 1800px) {
html {
background: #000000 url(images/blackmagic.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color:transparent;
font-size: 100%;
color:#000000;
}
h1 {
color:#000000;
text-transform:uppercase;
font-family: 'Sancreek', Impact, sans-serif;
font-size:2.5em;
}
h2 {
font-family: 'Pathway Gothic One', Verdana, sans-serif;
font-size:1.875em;
color:#000000;
}
a:link {
color:#000000;
}
a:hover {
color:#9b0505;
}
p {
color:#000000;
font-family: 'Monda', Verdana, sans-serif;
font-size:0.875em;
text-align:justify;
}
#container {
position:relative;
width: 2200px;
margin: 0 auto;
z-index: 0;
}
#social {
position:relative;
margin-left: 450px;
z-index: 0;
}
#header {
display:none;
position:relative;
}
#headerm {
display:none;
position:relative;
}
#headerl {
position:relative;
z-index:1;
margin-top:-500px;
margin-left:200px;
width: 100%;
}
HTML:
<div id="container" class="outer">
<div id="border" class="outer">
<div id="header" class="inner">
<img src="/images/header.png" id="headerimage" />
</div>
<div id="headerl" class="inner">
<img src="/images/headerlg.png" id="headerimage" />
</div>
<div id="headerm" class="inner">
<img src="/images/headerm.jpg" id="headerimage" />
</div>

There is no HTML ? Also posting a quick fiddle would make this so much easier to debug!

I actually just figured it out!
Because I was hiding the DIV for regular Desktop/Laptop Resolution and not defining the max-width for that value in its Media Query, it was also hiding it in the Large Resolution Media Query.
Simple fix of defining a max-width value for Standard Res.
Thanks! :)

Related

Responsive Web Design Not working

I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap
HTML
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3>Create actions and animations!<br>
<br>
Start Learning Javascript <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn Javascript!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*divs*/
.sidecontentleft {
align-self:center;
height:300px;
width:300px;
float:left;
}
.sidecontentright {
align-self:center;
height:300px;
width:300px;
float:right;
}
.sidecontent {
text-align:center;
height: 300px;
display: table-cell;
vertical-align: middle;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
}
/*buttons*/
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
/*Fonts*/
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
Your help would be appreciated! Thanks!
As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. For more control, use Bootstrap or Materialize, or another framework. It will also be much quicker. No person in their right mind would frown on going simpler.
.txt-jumbo, which styles the header font, has a default value of 100px. The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.
To make the font smaller on small screens, try something like:
#media (max-width: 600px) {
.txt-jumbo {
font-size: 50px;
}
}
where max-width: 600px means that the styles contained apply to screens less than 600px wide.
There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.
#media (max-width: 600px) {
li {
display: inline-block;
width: 100%;
}
}
When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.
1)For Header I use 2 Media Query Like This :
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
2)For navbar I use % instead of px.Like this :
li {
margin: 10px 2% 10px 1px;
//More Code
}
li a {
padding: 5% 7%;
//More Code
}
3)For Footer Information Languages,I have changed your code a little bit.
Full Code:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
margin: 10px 2% 10px 1px;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}
li a:hover {
background-color: #111;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
.con {
margin-top: 10px;
width: 100%;
clear: both;
}
.content {
padding: 10px;
}
.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
#media screen and (max-width:920px) {
.sidecontentleft {
width: 50%;
box-sizing: border-box;
}
}
#media screen and (max-width:650px) {
.box {
width: 100%;
float:none;
padding: 20px;
}
.content {
width: 70%;
margin: auto;
}
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="con">
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="box right">
<div class="content">
<h3>Learn the Cascading Style Sheet of web development!</h3>
<h4>Start Learning <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>LLearn data storing in web development!</h3>
<h4>Start Learning PHP <em>now</em></h4>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
</div>
<div class="con">
<div class="box right">
<div class="content">
<h3>Create actions and animations!</h3>
<h4>Start Learning Javascript <em>now</em></h4>
<button class="green-btn txt-marginall">Learn JavaScript!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML5 <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</div>

How to automatically resize divs to match window size

I want to change it so when I resize my window everything including divs are resized. Not just the background. I have just started HTML so I may not be familiar with the more advanced concepts. What can I do to resize the divs in my page to fit the window?
This is my main page
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<!-- META -->
<meta charset="UTF-8">
<title>Keyan Kazemian</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type="text/css" type='text/css'>
<link rel="stylesheet" href="styleone.css">
</head>
<body>
<div style="background: rgba(30,26,29,0.7); position: fixed; top:300px; left:440px; height:160px; width:600px; moz-border-radius:5px; border-radius:5px;">
<h1> Keyan Kazemian </h1>
<p> Hello, my name is Keyan and this is my life. </p>
</div>
<a style="display:block" href="about-me.html"> <div class="links">About Me</div> </a>
<a style="display:block" href="#music.html"> <div class="linktwo"> Music </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkthree"> Video </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkfour"> App Development </div> </a>
</body>
</html>
This is My style sheet
.links { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1046px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
.linktwo { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1252px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkthree { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1458px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkfour { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1664px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 0.9em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
a:link {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:visited {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:hover {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:active {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
html {
background: url(trop.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {font-size: 100%;}
h1 {color:#fcfcf5; font-size: 3em; font-family: 'Luckiest Guy', cursive; text-align: center;}
p {color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center;}
What you are trying to achieve is called responsive layout, which changes as per the screen resolution. Note that, it is not just sufficient to resize divs, Paragraphs etc. but you need to consider lot of other things like
Navigation bar
Images
Grids etc.
Covering RWD in this post is impossible, but you can find lot of stuff on search engine. Still refer these links available here, here and here.
Use CSS media queries for smaller devices also called responsive design (window resize)
Use this with your main stylesheet. Use smaller font size and margin for DIVs so that it can be viewable on small devices.
#media (max-width: 600px) {
selector {
//style for smaller devices
}
}
For example media queries for iPads
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
go through this Link for more information on media queries.

CSS: display:table; and width:100%; not working with images within cell on Firefox

I have a design that requires a responsive width, and I have some images that line up next to each other than need vertical alignment so I did the whole display:table;, display:table-cell; thing.
Unfortunately in Firefox, the images don't scale when the browser is scaled.
Fiddle:
http://jsfiddle.net/35Js5/
HTML:
<main>
<article class="companylist relative SectionStyle1">
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" alt="Mario" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f1/LuigiNSMBW.png" alt="Luigi" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f5/Toad_3D_Land.jpg" alt="Toad" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d5/Peach_%28Super_Mario_3D_World%29.png/200px-Peach_%28Super_Mario_3D_World%29.png" alt="Peach" />
</section>
</article>
</main>
CSS:
#import url(http://fonts.googleapis.com/css?family=Fjord+One|Imprima|Reenie+Beanie);
body {
background: #fff;
font-size: 62.5%;
font-family:"Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
padding: 0px;
color: #000;
width:100%;
text-align:center;
margin:0;
}
p, ul, ol {
margin: 1em 0;
line-height: 1.2em;
font-size:1.2em
}
li {
list-style-position:inside;
}
.col {
box-sizing:border-box;
display:inline-block;
float:left;
padding:10px 10px;
}
.col1 {
width:100%;
}
.col2 {
width:50%;
}
.col4 {
width:25%;
}
.col8 {
width:12.5%;
}
header, footer, main > article {
padding: 10px 10%;
width:80%;
float:left;
clear:left;
}
.SectionStyle1 {
background-color:WhiteSmoke;
color:Black;
}
.companylist {
display:table;
}
.companylist .col {
display:table-cell;
height:200px;
vertical-align:middle;
float:none;
}
.companylist .col img {
max-height:100%;
max-width:100%;
}
If you pull the fiddle up in Chrome, you can see the behaviour I want and expect in Firefox too.
If I put the float:left; on, the cells do shrink, but the vertical alignment is lost :(
I also tried adding a display:table-row; element to no avail.
Any help appreciated, thanks in advance.
Does adding table-layout:fixed to .company-list get what you want? See http://jsfiddle.net/35Js5/5/
Try Addidng moz specific styling using :
#-moz-document url-prefix() {
// Your styling
}
Here is the fix for your code
Fiddle:
http://jsfiddle.net/35Js5/6/
Only addition to your CSS is:
#-moz-document url-prefix() {
.col.col4 img {
max-height:100%;
max-width:100%;
}
.companylist .col {
width:12.5%;
float:left !important;
vertical-align:middle;
display:inline;
}
}
Hope this helps

content to sit in the middle of div

I am using Bootstrap 3 for my website and have created divs for each section to be 100% no matter how you manipulate the browser window etc. I wish to have my content sat in the middle of that at all given times heights and widths.
I am really struggling to get it right.
Here is my code:
<div id='imgDiv'>
<div class="container" style="padding-top: 300px;">
Smoothscroll
<center>
<h1 style="font-size: 32px; font-weight: 300;">Header</h1></center>
<center>
<h2 style="font-size: 20px;font-weight: 300; padding-top: 30px;">My name</h2>
</center>
</div>
</div>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
font-family: 'Ubuntu', sans-serif;
}
#imgDiv {
position:relative;
height:100%;
background-color: #1ABC9C;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFF;
}
If I understand what you want...
Demo Fiddle
HTML
<div id='imgDiv'>
<div> Smoothscroll
<h1>Header</h1>
<h2>My name</h2>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
font-family:'Ubuntu', sans-serif;
}
#imgDiv {
position:relative;
height:100%;
width:100%;
background-color: #1ABC9C;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFF;
display:table;
text-align:center;
}
#imgDiv > div:first-child {
display:table-cell;
vertical-align:middle;
width:100%;
}
you should also remove the center element and move your styles into your stylesheet instead of being inline.
You need to set margin auto for left and right side
#imgDiv {
margin: 0 auto;
width:100px;
....
}

Chrome not rendering full page using CSS (works in FF/IE)

I have a very simple web page but something in the CSS causes a problem for Chrome.
Basically, if the content goes beyond what is rendered on the immediate screen Chrome will not be able to scroll down to it. The content and scrolling works fine in FF and IE.
The only way I have been able to get Chrome to show the content (beyond eliminating the CSS) is to
change html{height: 100%;} to some higher value (200%). Obviously that is not an ideal solution.
HTML and CSS:
http://cssdesk.com/Z3k52
Browsers:
Chrome 23.0.1271.91 // FF 16.0.2 // IE 9.0.8112.16421
I'm sure I'm just missing something simple, but I don't know what.
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>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="box_margin">
<div id="title">Some Title, Info, Etc.</div>
<div id="link_nav">
<div class="links">Home</div>
<div class="links">Links</div>
<div class="links">About</div>
<div class="links">Contact</div>
</div>
<div id="contentbox">
<div class="box_header">Home Screen</div>
<div class="pagecontent">
<p>Text at the top</p>
<p>Next line</p>
<p>Next line</p>
</br>....
</br>....
</br></br></br></br>text continues below....</br></br></br></br></br></br></br></br>and can be scrolled to in FF/IE</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>o</br>o</br>o</br>o</br>o</br>\ /</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>....keep going....</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><p>But not Chrome</p>
</div>
<div id="footer">Here is the footer</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
line-height: 150%;
text-align: center;
font-size: 62.5%;
}
*
{
font-size: 1em;
font-family: Arial, Verdana, sans-serif;
color: #000000;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 600px;
}
.links
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
position:relative; bottom:0px;
color: #e1a630;
}
.links a{
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:bold;
}
#link_nav
{
margin-right:10px;
height:40px;
width:600px;
}
#title
{
width:230px;
height:40px;
margin-right:20px;
margin-top:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
font-weight:bold;
text-align:center;
float:left;
}
.box_header
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#002664;
font-size:1.9em;
margin-top:15px;
margin-left:15px;
margin-right:15px;
margin-bottom:15px;
width:573px;
}
.pagecontent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:1.2em;
margin-left:20px;
margin-right:20px;
width:560px;
}
#contentbox
{
position: absolute;
vertical-align: middle;
background-color:#5284CC;
width:600px;
clear:both;
}
#footer
{
width:600px;
height:20px;
background-color:#5284CC;
background-repeat:no-repeat;
text-align:center;
color:#BDCDEC;
}
#footer a
{
font-size:.8em;
color:#BDCDEC;
}
#box_margin
{
margin-top:25px;
}
html, body {
text-align: center;
}
p {text-align: left;}
i have edited your code check here : demo
html{
height: 100%; /* must be remove */
}
body{
height: 100%; /* must be remove */
}
your mistake was with setting height and also setting overflow : hidden.
Don't change the display property and positioning of the #container element.
The code below work fine on chrome and firefox. Didn't test on IE because im on a mac but i'm pretty certain it works.
#container
{
margin: 0 auto;
overflow: hidden;
width: 600px;
}
http://cssdesk.com/tyCdB