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>
Related
Basically I have this title that says testing. On large screens it isn't centered, and is moved to the right. I want it to be centered, but I can't get it centered. On smaller screens it is to the right of the images and pushing them left, keeping nothing centered. In all cases I want it to be below the images and centered in the page. Thanks.
I keep trying aligns, floats, widths, and margins/ padding but nothing works.
<div class="primary-content">
<span class="title">FTC TEAM 4466</span>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<span class="title">testing</span>
<h1>4466</h1>
<span class="egg"> <p>
egg
</p></span>
</div><!-- End -->
</div><!-- End .primary-content -->
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
I though that the div being below the other ones in the code would do it, but it just doesn't. I think the issue on big screens may be that .bot and .pod are different heights, but I dob't know how to make them equal as it changes as the page gets smaller and bigger. I don't know why my issue is happening for the small screens (under 1300px width).
Thanks again.
set display to flex and add justify.content:center to the CSS properties of the div you are trying to center.
this could happen because you are using an tag in the title,
span tags can not get centered, change this for an h1 tag or another
I did some changes to your code and this is what I came up with:
Feel free to use it
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 4rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
<div class="primary-content">
<h2>FTC TEAM 4466</h2>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<h2>testing</h2>
<h2>4466</h2>
<p>egg</p>
</div><!-- End -->
</div><!-- End .primary-content -->
I’m having trouble centering the divs named ‘one’ and ‘two’. They need to retain their styles exactly as they are which keep them side by side and margins but also be centered which is the bit I can’t work out?
Also the nav divs need to be centered which I have achieved with the styles below.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
float: left;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
float:left;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
Use display:inline-block; instead of float:left;.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
display:inline-block;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
display:inline-block;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
use this code:
#header {
position: relative;
overflow: hidden;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 auto;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;display:inline-block;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;margin-top:3px;
display:inline-block;
color:#953606;
}
jsfiddle link click here
Remove the floating in your css, as shown here.
https://jsfiddle.net/dy8bzuv3/
If you want to have both divs in a single line, simply add display:inline; to your css rules for #one and also #two
Good luck on your learning journey! The change I've made here is the #one and #two divs are being given display:inline. This will treat them similar to text, so the text-align option applies to them.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;
display: inline;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
display: inline;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
I have a block that's full width across the screen. Here, the text only needs to take 60% of the block.
My problem is that when I upload option 1, the background will show, but the text is not 60% but fullscreen.
If I upload option 2, there is no background color but the text is 60%.
What am i doing wrong?
OPTION 1:
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
OPTION 2:
.info
{
margin-top: 100px;
width: 100%;
padding:50px;
padding-bottom:50px;
background-color: white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
<div class="info">
<div class="tekst1">
<h2 id="tekst1">This is some text</h2>
</div>
<div class="tekst2">
<span id="tekst2">Here is a lot of text and it doesnt scale to 60% when in option 1.</span>
</div>
</div>
HTML CODE
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.info
{
margin-top: 100px;
width: 100%;
height:60%;
padding:50px;
padding-bottom:50px;
background-color:white;
text-align:center;
}
.tekst2 {
margin-top: 25px;
margin-bottom:25px;
text-align: center;
width: 60%;
margin-left:auto;
margin-right:auto;
font-family: 'Montserrat', sans-serif;
font-size:16px;
margin-top:25px;
float:none;
}
</style>
</head>
<body>
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
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