I have the following code
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
<div id="login_container">
<form method="post" id="login_form">
<table>login form</table>
</form>
<form method="post" id="create_account_form">
<table>create account form</table>
</form>
</div>
</div>
<div id="content">
content here
</div>
The header is about 60px tall and 960px wide, centered in the browser window and sticking to the top of the viewport. When the user clicks on "Login" the #login_container reveals itself. However, I want to position it aligned right with the header row, not aligned to the right of the viewport. I can do that by not using 'position: absolute' when styling #login_container, however, then the login form gets cut-off because the containing #header div is not tall enough. In other words, I want the #login_container aligned with the right edge of #header, but laid on top of #content, if any.
You could either set
#header {
position: relative;
height: 60px;
}
#login_container {
position: absolute;
right: 0;
top: 60px; /* equal to #header height, if it's not fixed, you should retrieve it dynamically via jQuery */
}
and then dynamically retrieve #content's size and apply it to #login_container.
Otherwise, and maybe even better, you could wrap the whole code in a #container div, set its width to whatever width you wish the site to have, set it centered, then move #login_container from inside #header to immediately after it and with absolute position. You will have a cleaner css code and less meddling to do with jQuery (just setting login_container's height).. so it should be like this (if I'm not missing anything):
<!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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#login_container {
position: absolute;
right: 0;
width: 100%;
z-index: 10;
}
#content {
position: relative;
z-index: 0;
}
</style>
<!--[if lte IE 6]><style type="text/css"></style><![endif]-->
</head>
<body>
<div id="container">
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
</div>
<div id="login_container">
<form method="post" id="login_form">
<p>login form</p>
</form>
<form method="post" id="create_account_form">
<p>create account form</p>
</form>
</div>
<div id="content">
content here
</div>
</div>
</body>
</html>
Give it a try and let me know if you still got problems!
Related
With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers - there is a big difference.
Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.
Ironically, the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.
See this plunkr for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.
Problem:
(Thanks Softlayer - for the graphics)
Desired Solution:
Of course the footer should be responsive and cross-browser friendly as well...
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.
But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.
Style CSS:
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches (where the height of the footer often changes at different break points). The simplest responsive sticky footer solution I've seen involves using display: table on a top-level container, e.g.:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
The best way is to do the following:
HTML:Sticky Footer
CSS: CSS for Sticky Footer
HTML Code Sample:
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS Code Sample:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Another little tweak might make it more perfect (depends on your project), so it will not affect footer on mobile views.
#media (max-width:768px){ .footer{position:absolute;width:100%;} }
#media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
I've been searching for a simple way to make the sticky footer works.
I just applied a class="navbar-fixed-bottom" and it worked instantly
Only thing to keep in mind it's to adjust the settings of the footer for mobile devices.
Cheers!
For those who are searching for a light answer, you can get a simple working example from here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Just play with the body's margin-bottom for adding space between the content and footer.
I will elaborate on what robodo said in one of the comments above, a really quick and good looking and what is more important, responsive (not fixed height) approach that does not involve any hacks is to use flexbox. If you're not limited by browsers support it's a great solution.
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Browser support can be checked here: http://caniuse.com/#feat=flexbox
More common problem solutions using flexbox: https://github.com/philipwalton/solved-by-flexbox
Not sure what you have tried so far, but its pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Since it's in bootstrap 3, the site will be using jQuery. So the solution could also be the following, instead of trying to play with complex CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
A different take on it, hope it helps.
Kind regards.
easily set
position:absolute;
bottom:0;
width:100%;
to your .footer
just do it
In case your html has the (rough) structure:
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
then the simplest css that fixes footer to the bottom of your screen is
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... where the height of the footer is 80px. calc calculates the height of the wrapper to be equal to the window's height minus the height of the footer (80px) which is out of the .wrapper
What worked for me was adding the position relative to the html tag.
html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours & haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.
--
Image of what I'd like to achieve:
http://i45.tinypic.com/2zrgu8o.jpg
Image of what my code is currently producing:
http://i48.tinypic.com/mbhlcz.jpg
--
My HTML:
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
<div id="header-bg">
</div>
</body>
</html>
My CSS:
#logo {
postion: fixed;
width: 300px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
.contact {
float:right;
margin-left:10px;
margin-bottom:10px;}
}
Your help is much appreciated.
I would suggest using a <span> instead of a div, either that or using <div style="display: inline;">
The problem can be solved by putting the contact div BEFORE the logo div in your HTML.
floats only float to the right or the left, not up. The contact div is below the bottom of the logo div and so floats right at that level. By putting it before the logo it floats right before the logo pushes it down.
use this html structure and change your css
<div id="header-bg">
<div class='center_wrap'>
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
</div>
</div>
can't do more luck of time
You've got it all right, you just have a typeo in your class definition. You have to say 0px rather than just 0 for your positioning
top:0px;
left:0px;
Here... take a look: http://jsfiddle.net/t5LZL/2/
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
​
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}​
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
​CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}​
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!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>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
I am working on a standard header/navigation for my website.
I started with having a CSS "height" value of 100% for the html, body elements but this resulted in the wrong layout.
However, when I change the CSS height property from "100%" to "auto", the layout is correct, but I lose the anchors. The text is still there (e.g "Advice", "Do It", "Home", Help") but the anchors (organized as list items) no longer appear in the navigation. I can't click on them anymore.
Why is this?
Here's my CSS:
html,body {
height: auto; /* This is the only property that I'm toggling */
margin: 0;
}
body {
margin: 0;
min-width: 978px;
font: 12px/16px Arial, Helvetica, sans-serif;
color: #000;
background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;
}
#nav {
position: relative;
float: left;
margin: 0;
padding: 0 2px 0 271px;
list-style: none;
background: url('../images/sep-nav.gif') no-repeat 100% 0;
}
#nav li {
float: left;
padding: 11px 0 0 2px;
height: 35px;
width: 128px;
line-height: 22px;
font-size: 18px;
text-align: center;
background: url('../images/sep-nav.gif') no-repeat 0 -1px;
display: inline;
}
#nav li a {color: #FFFEFE;}
.....
Here's the header HTML:
<body>
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- logo -->
<h1 class="logo">Site Name</h1>
<!-- Feedback button -->
<div class="feed-w1">
<div class="feed-w2">
<div class="feed">
<span class="l">Feedback, please</span><span class="r"></span>
</div>
</div>
</div>
<!-- Small links -->
<div class="top-nav">
<ul>
<li>Home</li>
<li>Feedback</li>
<li>Settings</li>
<li>Help</li>
<li>Sign out</li>
</ul>
</div>
<!-- Main Navigation -->
<div class="frame">
<div class="holder">
<ul id="nav">
<li>Advice</li>
<li>Do it</li>
<li>Your Profile</li>
</ul>
<!-- Search box -->
<div class="search-form">
<form action="#">
<fieldset>
<legend class="hidden">Search Form</legend>
<input class="text" type="text" value="Search" title="Search" />
<input class="submit" type="submit" value="Search" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I compared the computed CSS in Firebug when the html, body height property was set to "auto" vs. "100%" and they were the same.
Can somebody please shed some light on how retain the anchors in the navigation while setting height to "auto"?
Thanks for your help.
JMan, I don't see any problems when running your code on a sample page
One suggestion - check your DOCTYPE declaration
I use strictly "strict" :) (pun intended)
either
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(i tried your example with the first one)
Cheers,
hope you find a solution to your problem