Force <div></div> to the bottom of the web page centered - javascript

I have a <div>...</div> section in my HTML that is basically like a toolbar.
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?

I think what you're looking for is this: http://ryanfait.com/sticky-footer/
It's an elegant, CSS only solution!
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
#Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
Twitter Bootstrap implementation
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
#media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
And the rough markup body:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>

If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}

I just want to be clear on what your saying here:
bottom of the web page (the
document, not the viewport)
Naturally, a div will be at the bottom of the "document", depending on your layout.
If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.
The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.
Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):
http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)
Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D
-Ken

Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.

You can just give the div a:
clear:both; text-align:center;
and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.

Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.
For centering use the following 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>
<style>
.wrapper
{
width: 100%;
padding-left: 50%;
}
.test
{
width: 400px;
margin-left: -200px;
border: 1px solid black;
padding-left: -200px;
}
</style>
</head>
<div class="wrapper">
<div class="test">This is a test</div>
</div>
</html>
You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.

Related

Footer section add more than usual heigh

I am adding footer section to a simple web page since page has only few items on the page show white space at the bottom of the footer if i keep footer height at 150px. When i keep height:100% to take the rest of the space at bottom of the page, Rather it adds 3 - 4 times more to the footer section which show vertical scrollbar.
Is their a way i can only add that much height to footer section so that scrollbar wont be added. even using jQuery.
Example : http://jsfiddle.net/57fBK/10/
In the above mention fiddle example your will notice footer height than usual. To me it seems it by default always take height of HTML elements defined above the footer section.
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
background-color:red;
height:100%;
}
.footer
{
margin-top:50px;
text-align:center;
}
The problem here is that giving height:100% to .fullWidth makes it 100% of the viewport height...which means, if there's any content above it that pushes it down, .fullWidth is going to extend that much below the bottom of the viewport, creating a scrollbar. If you're only looking to visually have the footer appear to fill the remaining space (between the content and the bottom of the viewport), here's a way I've used once to fake it.
Simply make the entire body the same background colour as the footer, and place the rest of the content in a wrapper with the main background colour. For example, your HTML might become:
<div class="main">
(Content from before goes in here.)
</div>
<div class="row">
<div class="large-12 columns footer">footer</div>
</div>
And some altered/added CSS (it should be noted that .fullWidth is rendered completely unnecessary by this approach, so you can remove it from your HTML/CSS):
body{
background-color:red; /* Footer background colour */
}
.main{
background-color:#FFF; /* Main background colour */
}
.footer {
background-color:red;
margin-top:50px;
text-align:center;
}
Here's a JSFiddle demonstrating how this looks. Now, if there's extra space below the footer, it won't be perceivable unless you start inspecting elements. If this isn't what you wanted, you may want to look into sticky footers, as others have suggested.
Hope this helps! Let me know if you have any questions.
try this:
.fullWidth {
width: 100%;
margin:0 auto;
max-width: initial;
background-color:red;
height:100%;
}
also you need to set height for footer:
.footer
{
margin-top:50px;
text-align:center;
height: 50px;
}

Image no longer responsive as put in table cell layout

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

Vertical Alignment

Please take a look at this: http://sources.freehosting.bg/landing.html
I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1024x768) resolutions. By that I mean it does not have a scrollbar.
As you see there is plenty of free space so a scrollbar is unneeded.
The only solution I came up with is to calculate the height of #content with JS and to set a padding, but I realize it is the lamest possible solution.
Please advise me on how to achieve that.
See if this fiddle is what you are looking for. Simple solution IMO.
It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.
Code used in the fiddle are below.
HTML:
<div class="a">
text inside div a
<div class="b">
text inside div b
</div>
</div>
The important styles are:
display: table-cell
vertical-align: middle
The rest are only there for demonstration. CSS:
div.a {
border: 1px solid red;
}
div.b {
border: 1px solid blue;
height: 200px;
display:table-cell;
vertical-align:middle;
}
If your content height is fixed put a div before the content
<div id="distance"></div>
<div id="content">
Vertically centered :D
</div>
and style it like:
html, body {
height:100%;
margin:0;
padding:0;
}
div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}
div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}
​
The only way I know of that works using pure CSS, no JS and no hacks requires you to know the height of the thing you're trying to position:
<html>
<head>
<style type="text/css">
/* Give your document height */
body, #content {
height: 100%;
}
/* Give your element height */
.thing {
width: 20px;
height: 300px;
background: #000;
}
/* Position thing */
#content .thing {
position: absolute;
top: 50%;
margin-top: -150px; /* half the height of the thing */
}
</style>
</head>
<body>
<div id="content">
<div class="thing"></div>
</div>
</body>
</html>
EDIT: Updated height of item, container id. Still works just fine.
There is one way to do this without javascript and without knowing the height of the content - but purists will not like it. Then again, sometimes it doesn't matter if it's not approved by the trendy people. Sometimes all you need is to get the job done because you boss wants it that way.
And the solution is: use a table (told you purists wouldn't like it). Do layout the old school way and abuse the fact that HTML specifies lots of capabilities to tables.
A table cell is the only HTML element that has a vertical alignment attribute that does what most people expect it to do. Just give the table 100% width and height (so that is expands with the window size) and use cell alignment to position the content you want.
I've only ever had to use this trick once and it still makes me feel dirty* but when you really need it it works better than anything else.
*note: I'm a purist myself but understand that sometimes a man's got to do what a man's got to do.

HTML and CSS in order to fix footer content of a website

Can anyone teach me how to create a footer div which is always stay at the bottom of the website regardless of how much information is present in the middle and the most important thing here is that I'm not fixed any height property for the middle content(Please notice that is "website" not "window" because I don't want to fixed the footer that force the user always see the footer whenever they scroll up or scroll down in my website) A specific example is like Facebook that footer always at the end of the page no matter how many times you click older post button. Is there anyway possible in HTML and CSS or even javascript to do that. Please help me and thank you so much in advanced!
I've used stickyfooter in the past. You can learn it here http://ryanfait.com/sticky-footer/
You put the footer content after the other content. That's all.
(Unless you need to deal with earlier content that is positioned out of normal flow, is floating, etc).
One way is to use a master page with the footer div in it. Please take a look at this MSDN article for more info: http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
If you want the footer to be pushed down to the bottom of the window if the content isn't high enough to fill the window, use the technique offered in this article.
To summarize the article:
Create a wrapper around the page elements:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
Using CSS, give the body 100% height and give the container position:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
Again using CSS, give the content (in this example, #body), a padding-bottom with the height of the footer and position the footer absolutely at bottom: 0:
#body {
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
}
It's important that the footer has a fixed height (i.e. in px or em).
You can see a demonstration of this technique here: http://jsfiddle.net/PPvG/F7Fph/

Cross browser div center alignment using CSS

What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.
You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.
If your HTML is this;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
And your CSS is:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.
Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.
You can view a working example of this here: http://jsfiddle.net/UXKcA/3/
edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)
Check this Demo jsFiddle
Set following two things
HTML align attribute value center
CSS margin-left and margin-right properties value set auto
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
"If the width and height are really unknown beforehand, then you'll
need to grab Javascript/jQuery to set the margin-left and margin-top
values and live with the fact that client will see the div quickly be
shifted during page load, which might cause a "wtf?" experience."
You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});

Categories