I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.
On other sites I have not had this issues so I am not sure what is going on
Thanks
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
#media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Try remove padding attribute you added for link at line :
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
Btw : please reformat your code. It's to bad :(
Related
The problem is max-width(tm-section img ) is not scaling according to the browser. And before that I wanna ensure that it is not my browser problem as I had checked working of same with different code and its working.
the image is not changing according to the browser.
*{
margin: 0;
padding: 0;
}
body{
background:#ffd633;
background-color: pink;
}
.tm-header{
background: #80ffd4;
padding-bottom: 2px;
}
.tm-main{
width: 1200px;
margin: auto;
}
.tm-main::after{
content: " ";
display: block;
clear: both;
}
.tm-main img{
float: left;
display: block;
}
.tm-main .tm-nav{
float: right;
margin-right: 20px;
}
.tm-main .tm-nav ul li{
display: inline-block;
vertical-align: center;
}
.tm-main .tm-nav ul li a{
color: black;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-transform: capitalize;
padding-left: 5px;
padding-right: 15px;
text-align: center;
line-height: 74.5px;
}
.tm-main .tm-nav ul li a:hover{
color: brown;
}
.tm-section img{
max-width: 100%;
}
.tm-section{
overflow: hidden;
}
.tm-content{
font-family: 'IM Fell Great Primer SC', serif;
font-size: 35px;
width: 1500px;
}
h1,h2,h3{
padding-bottom: 15px;
padding-top: 15px;
}
p{
padding-bottom: 20px;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="tm-header">
<div class="tm-main">
<img src="logo.png" width="50px" height="auto">
<nav class="tm-nav">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div class="tm-main tm-content">
<section class="tm-section">
<img src="msd.png" alt="" width="100%" height="600px" style="">
</section>
<article>
<h1>This is something about me</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<h2>My Aim</h2>
<p></p>
<h2>conclude</h2>
<p>
</p>
</article>
</div>
</header>
</body>
</html>
If your container is tm-section then you can use the following and it will resize to its container:
tm-section img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
%: Defines the maximum width in percent of the containing block.
You should set width for .tm-section
EX:
.tm-section {
width: 800px;
}
.tm-section img {
max-width: 100%;
}
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...
I've been racking my brains to to figure out where I went wrong. The bottom div stretches all the way right will everything stays center page but the left side won't stretch full. Also when I resize the window smaller all the sub-divs collapse. Ideas???
https://jsfiddle.net/g506gk51/
Thank you in advance!
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
width: 100%;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
position:absolute;
margin-top: 10%;
margin-bottom: 10%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#Header {
float:left;
padding-left: 75px;
}
.circlefooter {
width: 50px;
height: 50px;
float: left;
margin: 25px 25px 0 175px;
}
.circlefooter p {
padding-left: 75px;
width: 150px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
</style>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="Header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I try to understand what you meant, I got this from your code.
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
display: block;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#topcontainer:after {
content: "";
clear: both;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
display: table;
table-layout: fixed;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
display: block;
float: left;
}
.circlefooter {
display: table-cell;
padding: 15px;
vertical-align: middle;
}
.circlefooter p {
margin: 0;
padding-left: 75px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
My question covers it all I cant figure out why my about section div's aren't using the color I set(White). I set it in my css, and for some reason it is not applying correctly. All help would be greatly appreciated
body {
width: 100%;
background: #444444;
}
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff;
}
header #logo {
background: #444444;
display: inline-block;
width: 150px;
margin-left: 60px;
float: left;
}
header nav {
width: 40%;
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px;
}
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
}
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444;
}
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff;
}
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000;
}
#aboutme {
height: 2400px;
}
.aboutsection {
height: 593 px;
border: 1px solid black;
background: #ffffff;
}
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px;
}
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%;
}
footer h1 {
display: table-cell;
vertical-align: middle;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<header>
<div id="logo">
<img src="img/logo/caseywoelfle.com.svg" width="150px" height="77">
</div>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div id="aboutme">
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
It boils down to a simple typo. You are using .aboutsection in your CSS selector but your div has a class of aboutsecton, missing an i.
Instead of:
<div class="aboutsecion"><p>Test</p></div>
...it should be:
<div class="aboutsection"><p>Test</p></div>
p/s: In addition, your height declaration is not working because of an additional white space in the height declaration. It should be 593px not 593 px.
You mis-spelled section:
<div class="aboutsecton">
should be
<div class="aboutsection">
You mispelled aboutsection. You spelled it aboutsecton in your HTML.
<div class="aboutsecton"><p>Test</p></div>
Should be
<div class="aboutsection"><p>Test</p></div>
Good luck!
Description:
I have a page, with a container (div.display). The div for the main content of my page is called #main. For a long time I struggled to get this div expand automatically with content and push the footer down, the one day I got it! However, now that I've gone onto the next version of my website, I've somehow broken it.
What's happening is, the #main div is expanding with content, however the .display class isn't. It always seems to stop about 100px before the #main div ends and for some reason, this is where the footer gets stuck. I have tried setting the container height to auto, 100% and not setting a height property in the css however it still does not expand.
Here is the code, if anyone has any idea I'd be so grateful!
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>Home</title>
</head>
<body>
<div class="display">
<div id="header">
<div id="logo">
...
</div>
<div id="navigation">
<ul class="glossymenu">
<li class="current">...<b>Home</b></a></li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="login" align="center">
...
</div>
</div> <!--END OF HEADER-->
<div id="main">
<div id="intro" align="center">
...
</div>
<div id="interested">
<div id="quote1">
...
</div>
<div id="buttons">
...
</div>
</div>
<div id="homeFeatures">
...
</div>
<div id="homePricing">
...
</div>
</div>
<!--End of Main-->
<div id="footer">
<div class="footerContent">
<div id="contactUs" class="footerClass">
...
</div>
<div id="community" class="footerClass">
...
</div>
<div id="sitemap" class="footerClass">
...
</div>
<div id="navWrap">
<div id="clientScroll">
<div id="scroller">
</div>
</div>
</div>
</div><!--END OF FOOTERCONTENT-->
</div>
<!--END OF FOOTER DIV-->
</div><!--END OF DISPLAY DIV-->
</body>
</html>
And here is the CSS:
#charset "utf-8";
/* CSS Document */
html, body{height:100%;}
html,body {margin:0;padding:0}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #000;
}
body {
background-color: #FFF;
}
a {
font-size: 14px;
color: #333399;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: bfce24;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
h1 {
font-family: Georgia;
font-size: 40px;
color: #000;
}
h2 {
font-family: Georgia;
font-size: 30px;
color: #000;
}
h3 {
font-family: Georgia;
font-size: 20px;
color: #000;
}
.header
{
background-repeat: no-repeat;
background-color: #f7f7f7;
height: 100px;
width: 100%;
}
.display {
/*position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
top: 0px; */
position: absolute;
left: 0%;
width: 100%;
}
#logo
{
position: absolute;
top: 20px;
left: 100px;
}
#navigation
{
position:relative;
top:90px;
}
#main
{
position:relative;
top: 100px;
left: 100px;
width: 1000px;
}
#footer
{
background-color: #5956a9;
background-repeat:no-repeat;
position: relative;
height:250px;
width: 100%;
}
.footerClass
{
font-size:14px;
color:#FFF;
}
.footerClass a
{
font-size: 14px;
color: #FFF;
}
.footerClass a:hover
{
text-decoration: underline;
font-size: 14px;
color: #bfce24;
}
.footerClass a:visited
{
font-size: 14px;
color: #bfce24;
}
.footerClass h1
{
color:#fff;
font-size:24px;
}
#contactUs
{
position:absolute;
left: 10px;
}
#community
{
position:absolute;
left: 800px;
}
#sitemap
{
position:absolute;
top: 170px;
left: 320px;
}
#login
{
position: absolute;
top: 18px;
left: 1000px;
}
#mainFeatures
{
position: relative;
top: 35px;
height:auto;
}
#intro
{
position: relative;
height:auto;
}
#interested
{
position: relative;
width: 1000px;
padding-top: 10px;
}
#quote1
{
position: relative;
float: left;
}
#buttons
{
position: relative;
float: right;
}
#homeFeatures
{
position: relative;
top: 20px;
}
#homePricing
{
position: relative;
padding-top: 20px;
}
First, this is odd, are you sure you want your entire layout to be positioned absolute?
.display {
/*position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
top: 0px; */
position: absolute;
left: 0%;
width: 100%;
}
For the main, have you considered using margin instead of top/left positioning?
#main
{
margin-top: 100px;
margin-left: 100px;
width: 1000px;
}
See it in action: http://jsfiddle.net/LepXg/3/