I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
Related
I have seen some web design lessons that always start with a css like this:
body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
I'm trying to figure out what's the point of declaring attributes like width, height or display for body and html that are, if I'm not wrong, by default in browsers.
I thought it would be to prevent and undefined return or similar when accessing the css with js, but the result is the same when the attributes are defined in the css than when left to default:
console.log($("BODY").css('width')); // Always returns the width of the body
I also thought it could be to start the inheritance in cascade elements, but a div inside the body inherits the value just the same.
Anybody knows a solid reason for this approach? any browser / device issue I have missed? future compatibility? plain pedantry?
I'm kind of curious about it.
I found a good reason to define the html and body width and height to 100%. Say you want to vertically align a relative positioned div, you need to put it into an absolute positioned container:
html,
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="container">
<div id="main">
<h1>MY DIV</h1>
</div>
</div>
But, setting the body width and height to 100% you get an absolute positioned container that covers the whole window:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="main">
<h1>MY DIV</h1>
</div>
You get the same result, but it saves you a div element.
Im building a website and the footer wont stick at the bottom. Could someone help me with this issue?
CSS
#footer {
background-color: #454245;
bottom: 0;
float: right;
height: 200px;
left: 0;
margin-top: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Try like this: LINK
HTML:
<div class="wrapper">
<p>Your content goes here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer,.push{
background-color:#ccc;
height: 155px;
}
You will have to provide position as absolute and it will only work when you can provide a wrapper or a parent div with position relative.
Look at this fiddle [http://jsfiddle.net/tLyC6/]1
You can have a sticky footer by setting its position: fixed (not relative) with bottom: 0
#footer {
background-color: #454245;
bottom: 0;
height: 200px;
overflow: hidden;
position: fixed;
width: 100%;
}
If you want footer to stick at the bottom, you can do it with using less code.
#footer {
background-color: #454245;
height: 200px;
margin:0 auto;
width: 100%;
}
I have a basic website, but I'm trying to put a fixed footer at the bottom similar to what I did for my header. For my header, I did the following.
body {
background: url(blueheader.jpg) repeat-x #F4f4f2
}
I want to do the same thing but have it show up at the bottom.
You should be wrapping your header and footer in their own tags and targeting them seperately. Leave the body as the "canvas" for your site.
HTML
<body>
<div class="header"></div>
content!
<div class="footer"></div>
</body>
CSS
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45px;
background-color: red;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
background-color: blue;
}
HTML:
<footer>
Your content here.
</footer>
CSS:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 45px; /* change this to suit your necessary height */
background: url(blueheader.jpg) repeat-x #F4f4f2;
}
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
I'm trying to figure out how to have a floating navigation bar to the left of the content, that is fixed width but has a container around it that extends to the edge of the viewport while keeping the content centered on the page.
And here's what I got going so far and an image of what I mean. http://dl.dropbox.com/u/23132/index.html
Any help or ideas?
Got a solution from Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.
Simple example
http://dl.dropbox.com/u/1588084/floatmenu.htm