I have a very simple question I believe. I have a footer.php that I put on my main page and all subpages (to make it easier so I can change the footer in one location). And I am trying to make it so the footer remains at the center of the fixed-width no matter what size the browser window is. For example, I want my pages to be 950px width and the footer always be in the center, so that even when I resize the browser to as small as it goes, it simply COVERS the footer, rather then moving it with the resized window. Much like apple.coms footer.
Thank you for your help
You just need to set the width of your footer and then give it a margin:0 auto where 0 stands for the top and bottom margins and auto is for the left and right.
In your markup:
<div id="footer-container">
<div id="footer">
Footer stuff
</div>
</div>
And in your CSS:
#footer-container {
/* centering for IE */
text-align: center;
}
#footer {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
}
Edit: I was putting this comment on some of the other solutions, but deleted them because I didn't want to copy/paste on all of them. Just please be aware that margin: auto doesn't work in older versions of IE, so if you want to have the footer aligned in the middle, you'll need to do some nesting, like I have in this one.
Simply set the width: 950px, and margin-left:auto; margin-right:auto;.
With the left/right margins at auto, the <div> will be centered. Once the size of the browser gets down to the point where scrolling is needed, the browser will not shrink your <div>, it will just require left/right scrolling, which is needed for your content anyway.
I think you could solve it with a little bit of CSS:
html & php:
<div id="footer">
<?php include("footer.php"); ?>
</div>
CSS:
#footer {
margin: 0 auto;
text-align: center;
}
Hope this helps! :)
Related
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
I have an HTML page. On my 15 inch laptop screen, it looks ok. But people with a wider screen have reported that the text on the right side of the screen is spilling far to the right.
If I place the view-source HTML, it will be very long. So I am posting the link to the page. Please do not consider this as me advertising the site (If people complain, I will replace the link with the html).
I am suspecting I need to wrap something in some div, but not certain. I am looking at it with firebug, and it seems that the issue is happening right after the Google ad, but I am not certain.
Advice for how to fix the right-spill are much appreciated.
The site is problemio.com
Thanks,
Alex
You need to set a width or max-width on your a container div.
For your site, you have a div with no ID or class associated with it (the one just above your banner). Try setting a width: 1200px or max-width: 1200px on that div (or whatever size you want)
If you want your site to be centered, also add a margin: 0 auto; on the element you set the width limit too.
This is the current structure of your site:
<body>
<div class="wrapper"> <-- make this your wrapper
<div class="banner" .....></div>
<div id="body_container"> .....
For your CSS:
.wrapper {
width: 1200px;
margin: 0 auto;
}
Give your <body/> a width or max-width:
body {
max-width: 800px;
}
Give your site a wrapper like this:
<body>
<div class="wrapper">
......... REST OF SITE HERE ..........
</div>
</body>
On wrapper define the following:
.wrapper {
width: 100%;
max-width: 1140px; /* you cna change this to whatever px width you want */
margin: 0 auto; /* center */
}
This will center your site, give it a max width in PX and have it stretch the full amount that it can until it hits that limit.
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
You see tons of sites with their content very nicely centered, like dribbble.com for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.
I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
Can someone help me figure out how to do something like this?
The standard practice is to have a div that wraps your centered content, such as...
<div id="container">
...everything you want to center
</div>
And the in your CSS:
#container {
width: 970px;
margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}
I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.
It's simpler.
selector-that-matches-a-container {
width: <some length>
margin: auto;
}
Maybe with this CSS:
.content {
position:absolute;
left:100px;
right:100px;
}
I am developing an html page on Windows platform. I find when the resolution (or size, in pixels) of browser (display) is larger than the page size, the page will be aligned to the left of the browser, and I want to align the page to the center (middle) of the browser when the page size is smaller than browser.
Any ideas how to implement this and how to find the root cause why aligned to left? The html page is big and not convenient to paste html code here.
thanks in advance,
George
First of all, you'll want to wrap your page content in a block (this block will be centered):
<div id="body">
<!-- your page content here -->
</div>
Then you'll want to style it as being centered. Due to a little disparity in how Firefox and IE handle centering a block, you'll have to do 2 things to center this block.
1. Set the body as centering everything (for IE):
body {
text-align: center;
}
2. Set the left and right margins of your interior block as 'auto'; and
3. Since centering text inherits to its child nodes, you want to set it back to left-alignment (unless, you do want all your text to be centered.. blah!):
#body {
margin: 0px auto;
text-align: left;
width: 800px; /* set this width to how wide you want your content to be */
}
Any ideas how to implement this and
http://dorward.me.uk/www/centre/
how to find the root cause why aligned to left?
… because that is the default.
<style>
body
{
width:800px;
margin:auto;
}
</style>
you simply need to add, text-align: center; to your body to cover legacy browsers and add:
text-align: left;
margin: 0 auto;
to your first container div ... this will be centered horizontally in all browsers, no matter how old.