Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.
What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}
Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?
Thanks
content right, with sidebar left is perhaps the easiest floated layout to make, just float the content right with a width, let the left fill the space with overflow to avoid wrapping. footer goes below by clearing.
As for the header put a fake header div first in the source, presuming there may be a logo or something to go in it, even though you might not want hordes of links up there if there is a big dropdown menu to go in there or something like that. Anyway I'd make the "fake" header tall enough to create the space you need then put any actual content in it, then put the content you want to appear top only in a div at the bottom and absolutely position it.
here's a fiddled mockup
This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin: 0 auto -2em;
}
.content{
float: left;
width: 80%;
}
.menu{
margin-left: 80%;
}
.header{
position: absolute;
top: 0px;
height: 3em;
width: 100%;
}
.clearheader{
height: 3em;
}
.footer, .clearfooter {
height: 2em;
clear: both;
}
.container {
background: grey;
}
.header{
background: cyan;
}
.clearheader{
background: cyan;
}
.footer{
background: blue;
}
.clearfooter {
background: lightblue;
}
</style>
<link rel="stylesheet" href="NJC layout2.css" ... />
</head>
<body>
<div class="container">
<div class="clearheader"></div>
<div class="content">Content</div>
<div class="menu">menu</div>
<div class="clearfooter"></div>
</div>
<div class="header">header</div>
<div class="footer">Footer</div>
</body>
</html>
If I understand your question right, this should be your answer:
http://www.positioniseverything.net/ordered-floats.html
I actually think this article is explaining everything quite nice.
Related
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}
I've been in the industry for many years, however for the last 10 years I haven't had to do much of the HTML myself. I've recently become the only developer at work and as such I have to do all of the HTML myself as well.
Normally this wouldn't be an issue, however I'm trying to stick with the same quality standards that I have for my PHP / MySQL / JavaScript / jQuery work that I do. So tables are definitely out of the question (the last time I had to write HTML/CSS myself was when nested tables was acceptable).
I've been toying around with HTML divs and CSS and I'm having some pretty major issues with it, and not finding much of anything online other than the crap posted at W3Schools doesn't help either.
Let's first take a look at some code I'm working on, here's the HTML:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
width: 100%;
}
footer {
height: 120px;
margin-top: -120px;
width: 980px;
background: orange;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
<link href="inc/css/style.css" rel="stylesheet">
</head>
<body>
<div id="page_wrapper">
<div id="content">
<header>this is the header...</header>
<div id="content-wrapper">sdasd</div>
<footer>
this is the footer
</footer>
</div>
</div>
</body>
</html>
I've attempted several variations of this, and I haven't been able to get it to look the way that it should. Note that I'm using background colors specifically to tell the positioning of everything because this is more of a learning exercise than a real-world example.
Many of the pages that I will have to create will have a background image in the body just like many websites these days. Then the content will be 980 pixels wide. My big problem with the code above, is that the content-wrapper div, needs to be 100% of the available space if the content isn't long enough to push it down.
When I add height: 100% to that declaration in the CSS it seems to render it just fine however it puts it to 100% of the window which makes it overlap the page_wrapper div that contains it.
I'd like to not use overflow declarations at all, as for some reason every time I do it screws everything else up.
So I guess the real question and/or request here would be:
How do I do what I would like to do in the above code?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
height: 100%;
position:relative;
}
footer {
height: 120px;
width: 980px;
background: orange;
position:absolute;
bottom:0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
</head>
<body>
<div id="page_wrapper">
<div id="content">
<div id="content-wrapper">
<header>this is the header...</header>
test
<footer>this is the footer</footer>
</div>
</div>
</div>
</body>
</html>
The body tag is already "100% of the available space if the content isn't long enough to push it down."
So just use that element for anything you need (background images, etc). Take a look at CSS properties such as background-position to control where something is visible inside the <body> tag.
Otherwise, I would go for min-height: 100%; on the wrapper but am not sure how compatible that is with older versions of IE. And it may or may not do funky things on a touchscreen devices.
In general however, HTML is not very good at vertical layout. Especially in relation to the browser window's height. Most of the issues can be worked around in modern browsers, but it's better to simply accept this constraint and design your website around the assumption that you have no control over the height. It's just not worth the headache.
You don't need the page wrapper or content div. You can just set the body width to 980px. You can also set your html and body to whatever color you want.
While W3Schools has gotten a deservedly bad rap, they've cleaned up quite a bit and aren't a bad, quick reference.
I have a site that has the following structure:
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>
Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window -- whichever is visually lower. I've read a lot of things about how to do it, but I can't seem to get it to work correctly.
html, body, #page_wrapper { height: 100%; }
#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}
#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}
It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.
Any idea how to repair something like that? I'm at my wits end with it trying to google up an answer...
Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.
You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.
Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.
To make this work properly in IE6 add height: 100%; to #page_wrapper
<html>
<head>
<style type="text/css">
body, html {height: 100%;margin:0;padding:0;}
#page_wrapper {min-height: 100%; background-color: red;}
#header{height: 200px; background-color: green;}
#content-wrapper{height: 200px; background-color: yellow;}
#footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
</div>
<div id="footer"></div>
</body>
<html>
live example of this can be found on:
https://www.effacts.com/effacts/public?context=107
a proper sheet and html can be found here:
http://www.cssstickyfooter.com/
Does this help:
css sticky footer in an asp.net page
absolute position the footer div...
In #footer css try adding clear:both;
or
add in footer CSS right after position: relative; bottom:5px;
With position: relative you can actually use, top, right, bottom and left.
If you always want it at bottom you can put in as bottom:5px; If you want it at the bottom center then you can put in bottom: 5px; and right or left ...
5px above is just an example you can change pixel to as many as you want.
Furthermore, you can also have clear:both with it there as that clear make sure there is no other content that would override it.
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
Here is my DEMO:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
</form>
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
This site has some excellent examples:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - or i'm just too sleepy
Try playing around with the following css rule:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Change the height to suit your page. height is mentioned twice for cross browser compatibility.
you can kinda hack it with the min-height declaration
<div style="min-height: 100%">stuff</div>
You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.
It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed
Try Ryan Fait's "Sticky Footer" solution,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.
Try:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Haven't tested it yet...
Sticky footer with fixed height:
HTML scheme:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Try http://mystrd.at/modern-clean-css-sticky-footer/
The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D
Demo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
I think the issue would be fixed just making the html fill 100% also,
might be body fills the 100% of the html but html doesn't fill 100% of the screen.
Try with:
html, body {
height: 100%;
}
Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
It isn't quite what you asked for, but it might also suit your needs.
I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.
Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.
It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept
height: 100%;
as a higher value than the viewpoint of the browser window.
Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.
#content {
height: calc(100% - the amount of pixels the content div is away from the top);
}
So if your div is 200px from the top, the code you need would be
#content {
height: calc(100% - 200px);
}
I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)