Browser shows div only when I set exact height. But i want to create resizable div according it's contents. Tried height: auto and height:100%. It doesn't help.
My div looks like that. It's background div of sidebars and content.
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
UPDATE
my html looks like that
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(core/design/img/bg.png);
background-position:top left;
background-size:100%;
background-color:#fff;
background-repeat:no-repeat;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
}
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
overflow: visible
}
.header {
padding:20px;
}
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited{
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat { /
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><img src="core/design/img/logo.png" alt="Insert Logo Here" name="Insert_logo" width="438px" height="95" id="Insert_logo" style=" display:block; margin:0 auto;" />
<!-- end .header --></div>
<div class="wrapper">
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="sidebar2">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
div's will naturally resize in accordance with their content.
If you set no height on your div, it will expand to contain its conent.
An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div (wrapper) clears the floats.
Here's some ways to do this:
#wrapper{
overflow:hidden;
}
Or
#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}
make sure the content inside your div ended with clear:both style
Here is the Latest solution of the problem:
In your CSS file write the following class called .clearfix along with the pseudo selector :after
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then, in your HTML, add the .clearfix class to your parent Div. For example:
<div class="clearfix">
<div></div>
<div></div>
</div>
It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic.
Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "".
Source: http://css-snippets.com/page/2/
According to this, you need to assign a height to the element in which the div is contained in order for 100% height to work. Does that work for you?
As stated earlier by Jamie Dixon, a floated <div> is taken out of normal flow. All content that is still within normal flow will ignore it completely and not make space for it.
Try putting a different colored border border:solid 1px orange; around each of your <div> elements to see what they're doing. You might start by removing the floats and putting some dummy text inside the div. Then style them one at a time to get the desired layout.
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):
Here's a fiddle: http://jsfiddle.net/W3qqh/
Questions
What's causing the space?
How can I eliminate the space?
Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.
HTML
<div class="header">
<div class="home-logo">HOME</div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}
In .sub-nav, add:
float:left;
position:relative;
left:239px;
In .main-nav, add:
float:left;
Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.
Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.
JSFiddle Demo
UPDATE
In .main-nav, you have:
padding: 2px;
If you remove that and add position and left in .sub-nav, you wouldn't need float property.
JSFiddle Demo
Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?
First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).
.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px; }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
I have a div that contains an image with a width of 100%, I want to put all of my other content (everything that will go in the content div) beneath it. Here is my current code:
98.214.131.200/index.php
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Forum</li>
<li>Join</li>
<li>Members</li>
<li>Events</li>
<li>Training</li>
<li>Facebook</li>
<ab>Peoria Triathlon Club</ab>
</ul>
<ul id="quote">
<p>"random quote"</p>
</ul>
<div id="bg"><img src="bg.jpg" width="100%" alt=""</img></div>
<div id="content">
<p>content</p>
</div>
</body>
</html>
98.214.131.200/style.css
body {
background-color: #000000;
color: #C1C1C1;
font-family: Arial,Verdana,Helvetica,sans-serif;
margin: 0;
}
#bg {
position:absolute;
top:0;
left:0;
width:100%;
}
#content {
position:relative;
color: #FFF;
}
#nav {
z-index:1;
position:relative;
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #c00;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
#nav ab {
float: right; }
#nav ab a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #c00;
border-right: 1px solid #ccc; }
#nav ab a:hover {
color: #c00;
background-color: #fff; }
#quote{
z-index:1;
position:relative;
}
#quote p {
color: #000;
width: 350px;
}
You can visit http:// 98.214.131.200 to see my current code.
Take the <p> out of the <ul>, and place it (along with the #content <p>) inside of #bg. Then revisit your positioning declarations...
Absolute positioned elements depend on a parent container with Relative positioning. Thus, #bg should be position:relative while #quote position:absolute. By using #bg as the parent for both the quote and the content - you keep everything relative to that one element you're trying to focus on.
Built a fiddle (using your IP address for the images).
http://jsfiddle.net/bqXc6/
Here's the gist tho:
#bg { position:relative; width:100%; }
#quote {
position:absolute;
color: #000;
top: 20px;
width: 350px;
margin-left:20px;
}
#content { color:#FFF; margin-left:20px; }
Please note: In the fiddle, I cleaned up your code for your 'float:left' nav elements using overflow hidden on their parent (just to push open the height/width) so it's background-color was visible.
To put background image, use following css property
background-image:url('yourimage.jpg');
You should embed your #nav and #quote elements into a div or header tag and position it absolutely. Then you can position you image container relatively, which will push down subsequent content.
HTML:
<div id="header">
<ul id="nav"></ul>
<ul id="quote></ul>
</div>
CSS:
div#header{
position: absolute;
}
#bg{
position: relative;
}
You can use the display: block css property to make it it display on its own line. Just add that property to #bg in your css stylesheet.
My footer will not stay at the bottom of my page.
I tried the sticky footer trick, but no good.
Seems my footer has white space beneath it.
Adjusting height on it has done no good.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<link rel="stylesheet" type="text/css" href="style3.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script src="navigation.js"></script>
</head><body>
<div id="top">
<header>
<div id="topLeft">topleft</div>
<nav id="nav-wrap">
<ul id="nav">
<li>Home</li>
<li>Attendees<ul><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li></ul></li>
<li>Exhibitors</li>
<li>Speakers</li>
<li>Program</li>
</ul>
</nav>
<div id="topRight">topright</div>
</header>
</div>
<div id="middle">
<div id="headerLeft"></div>
<div id="headerimage">
<img src="header-2013.jpg"/>
</div>
<div id="headerRight"></div>
<br style="clear: left;" />
</div>
<div id="pagewrap">
<div id="content">
<!-- <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3>
<p>Unholy is a new, upcoming raiding guild with goals of
successfully accomplishing Player versus Environment and Player versus Player
raiding content. If thou art seeking such guild then thou would consider joining
us on our quest to victory over the evils that lurk within the depths of
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts
that roam abroad the forsaken ground in the Outlands and whish to further
explore and cleanse such places. If this should be thy calling then we welcome
you to our quest for victory, For the Horde </p> -->
</div>
</div>
<footer>
<div id="footer">
footer
</div>
</footer>
</body></html>
And here is the CSS:
/************************************************************************************
GENERAL
*************************************************************************************/
html{
height:auto;
}
body {
font: .9em/150% Arial, Helvetica, sans-serif;
color: #666;
overflow-x:hidden;
/******extra Mike Clayton **/
margin: 0;
padding:0;
height:100%;
}
a {
text-decoration: none;
color: #39C;
}
h1, h2 {
line-height: 120%;
margin: 0 0 10px;
color: #000;
}
header {
content: " ";
display: table;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 100%;
max-width:650px;
margin: 0px auto;
/**Mike Clayton**/
min-height:100%;
height:100%;
}
#content {
clear: both;
border-top: solid 1px #ccc;
padding-top: 20px;
margin: 20px 0;
width:100%;
/**Mike clayton**/
/* padding-bottom:250px; */
padding-bottom:55%;
}
#top{
width:100%;
background-color:#002664;
clear:both;
}
#topLeft{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#topRight{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#middle{
width:100%;
background-color:#AD1B30;
overflow: hidden;
}
#headerLeft{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#headerimage{
width:650px;
align:center;
margin:0 auto;
}
#headerimage img{
width:100%;
}
#headerRight{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#footer{
/* background-color:#002664;
width:100%;
margin-top:-100;
height:150px; */
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:#002664;
width:100%;
margin-top:-100;
}
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
margin-top: 20px;
}
/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}
/************************************************************************************
MOBILE
*************************************************************************************/
#media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
#headerimage {
display: none;
}
}
#media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
}
So, that last post from Kakarott worked.
Also, I used position:relative for my Media Query mobile dev and it made that same CSS work for my Mobile site.
So, for desktop and tablet, I'm using position:absolute and for mobile:relative.
FYI, I'm using a responsive design.
Check this
http://code.google.com/p/cleanstickyfooter/
and the best solution
http://www.cssstickyfooter.com/
Change your footer css to:
#footer{
clear: both;
position: absolute;
z-index: 10;
height: 3em;
bottom:0;
background-color:#002664;
width:100%;
}