Given a sticky footer such as that on Ryan Fait's site with a fixed pixel height, is it possible to center, both horizontally and vertically, variable-size content in the space above this footer?
I would suggest looking at Bobby van der Sluis's article on Footers at A List Apart.
Example #7 at the end of his article shows a vertically centered block. It does rely on scripting, but it is truly minimal.
edit You can also use a single-cell table to accomplish vertical centering. Incorporating it with Ryan Fait's sticky footer would give you something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#footer {
margin-top: -150px;
height: 150px;
}
#footer {
background: #bbd;
}
.block {
width: 300px;
padding: 20px;
background: yellow;
margin: 0 auto 150px; /* height of #footer */
}
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div class="block">
<h1>Vertically Centered!</h1>
<p>This block will remain centered. Just needs that one table cell wrapping.</p>
</div>
</td></tr>
</table>
<div id="footer">Footer Content here</div>
</body>
</html>
well, then you could set this for the vertical align of content:
.verticalalign{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
Related
I am having issues to fix the header. I already manage to make the footer sticky and responsive, now I want the header to be fixed and responsive for different screen size.
This is what I tried so far:
Live Demo http://jsbin.com/vevay/1/edit?html,css,output
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
</html>
CSS code
html {
height: 100%;
}
.container {
display: table;
height: 100%;
}
.block {
display: table-row;
height: 1px;
}
.push {
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
.block:nth-child(odd) {
}
.header_block{
background: grey;
}
.body_block{
background: lightblue;
}
.footer_block{
background: green;
}
update:
I did some researcher before posting this question, their are this one but the footer is not responsive, that's why I posted this question.
EDIT
I've come up with another solution : http://jsbin.com/gevafi/2/edit but I still have a margin left at the bottom of the footer.
EDIT 2
Temporary solution: http://jsbin.com/vokiqi/1/edit?html,css,output
Decided to have mercy on you and create one from scratch for you: http://jsfiddle.net/yo2ukrua/3/
Instead of using tables, I removed all of it and kept them as blocks. For your setup, you didn't really need any tables and I'm guessing you only used it so that you could make your footer stick to the bottom.
Once they're back to blocks, you can just give the footer and header a fixed position, set the footer to bottom and header to top.
Then apply a top and bottom margin to the body and the margin should be the height of the footer and header.
CSS:
.header_block {
background: grey;
position: fixed;
width: 100%;
top: 0px;
}
.body_block {
background: lightblue;
margin-bottom: 18px; /* height of your footer */
margin-top: 18px; /* height of your header */
}
.footer_block {
background: green;
bottom: 0px;
position: fixed;
width: 100%;
}
HTML:
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
Alternatively, you can have a better footer
http://jsfiddle.net/yo2ukrua/15/
It uses a div (push) that has a minimum height of the window size but if the window size is smaller than the content (creating a scroll) it then uses the height of the content itself, thus always pushing the footer to the bottom. The footer also retains a position of relative.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to make a footer fixed without giving the position property like
position:fixed
I have tried a lot, but footer doesn't stand at bottom every time. Any suggestion ?
Maybe you're talking about sticky footer...
In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:
<div id="page"></div>
<footer id="colophon"></footer>
Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.
body {
margin: 0;
padding: 0;
}
The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.
brought in jQuery and inserted the code.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$("footer#colophon").css("position","absolute").css("bottom",0);
}
});
</script>
In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv.
<!– Add conditional for IE7 + 8 support –>
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
See the original demo or on jsFiddle
Source: Joseph Fitzsimmons
Try this
body{margin:0; padding:0;}
.footer{bottom:0 !important; position:absolute; width:100%; height:300px; text-align:center; background:#000; }
------------------ Here is complete code ----------------------------
<!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">html, body { height: 100%;}div.header, div.foo { display:block; text-align: center; }div.header { height:30px; background-color:#f5f5f5 }.navbar-fixed {
left: 0; position: fixed; right: 0; top: 0; z-index: 1030;}`.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
padding:20px 0px 50px 0px;
}
div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}
</style>
</head>
<body>
<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>
</body>
</html>`.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
padding:20px 0px 50px 0px;
}
div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}
</style>
</head>
<body>
<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>
</body>
</html>`
This is the snippet from my css file
#centered{
position: relative;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#table{
text-align: center;
font-size: 1.5em;
font-weight: 900;
background-color: #5E9DC8;
}
This is the html section that I'm trying to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bicycle Store Database</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<h1>ACME BICYCLE SHOP</h1>
<h2>GET IN GEAR!</h2>
<div id="centered">
<table id="table" border="0" cellpadding="10">
<tr>
<td>Go Shopping!<br/><br/>
Check a Service Ticket</td>
</tr>
</table>
</div>
<p><br/>HOME</p>
</body>
</html>
This is the result:
Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?
Why you are using table for that? any specific reason? Can't you simply do it like this?
<div class="center">
Go Shopping
<br>
</div>
.center {
margin: auto;
/* Other styles goes here, width height background etc */
}
you are centering #centered but not the table in it.
add margin:0 auto; to #table.
The div is centred in the page.
The table is left aligned in the div.
Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.
I am trying to make a simplistic layout for my website.
I want this navigation bar to fill the screen horizontally but the page content to be centered.
I have managed to achieve this, but it breaks when the content gets bigger than its predefined width.
I have only a few pages where reports and tables push the design wider than its default so would like these pages to expand nicely.
Currently the moment my content gets to wide, it hugs the left of its container but pushes the right margin out.
I would like this to push the left and right margins out equally and remain in the center.
How can I achieve this? Here is my current html:
<!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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header">LOGO</div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</div>
<div id="footer">footer content</div>
</div>
</body>
</html>
I have simulated the content getting wider by making a really really long word.
In my site this would typically be a report in an HTML table.
Any help will be greatly appreciated. Thanks!
edit:
this isn't just about text which can be wrapped or broken.
Consider replacing the "contentcontentcontent" above with a table that is wider than its parent div:
<table border="1" width="800px"><tr><td>here is some content</td></tr></table>
This table now touches the left border of the content div, but pushes out the right border of the content div. I want it to push out both borders equally and remain in the center
Here's how to do it (Scroll to MidiMagic's post): http://www.daniweb.com/forums/thread57605.html
You need to wrap words in div#content.
You can use something like this:
div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
Someone who is not a member on this site managed to solve this problem for me.
What we did is set the content div to 100%, then place a div inside this surrounding the content with align="center"
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
The entire solution:
<!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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header"><br/>LOGO<br/></div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
</div>
<div id="footer">footer content</div>
</div>
</body>
I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.
Create 3 columns on your page. All your text goes in the center column and can be left alligned.
Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
I believe this might help you.
try
#div {
margin:0 auto
};
Have a container div within which you put all your content:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Then add some css specifying the width and margins of your container div:
#container {
width: 750px;
margin: 0 auto;
}
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
And in the HTML, wrap everything in:
<div id='container'>
...
</div>
(Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)