I have two divs with width 100%. I want one to always be on top of all content, and I want the second to be always on the bottom of everything. How can I do this? Preferably in pure CSS but I'll try jQuery/JS solutions if I need to.
I tried adding the header using include("header.php"); and header.php contains just the HTML code of the header. However, it doesn't work, but putting that exact code in place of the include works fine. How can I fix this?
You can start with position:fixed and defining either top and left properties or bottom and left properties.
Check out CSS sticky footer while you're at it (deprecated link).
A new sticky positioning has been introduced in CSS. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. Using fixed and sticky positioning you can implement headers and footers that are always on top of everything else.
Sticky positioning might not be available to all browser versions that the end-user might use. For achieving sticky footers in older browsers do check How to make a sticky footer using CSS?
Use position:fixed and either top or bottom Example.
<head>
<title>Example</title>
<style>
#top {
color: white;
width: 100%;
background-color: black;
top:0px;
position: fixed;
}
#bottom {
color: white;
width: 100%;
background-color: black;
bottom:0px;
position: fixed;
}
#content {
padding-top: 10px;
}
</style>
</head>
<body>
<div id="top">top header</div>
<div id="content">content</div>
<div id="bottom">bottom footer</div>
</body>
...that flash applications will usually appear over elements like this. To get around this, use the wmode="transparent" attribute in objects/embedd. Example:
<object>
<param name="movie" value="example.swf" />
<param name="wmode" value="transparent" />
<embed src="example.swf" wmode="transparent"></embed>
</object>
