I am using this website as an example. http://imgur.com/xyswjQH Here I have a screenshot of the website in fullscreen. However when I resize the page http://imgur.com/ZAKtsR9 you can see that the page almost cuts off elements instead of jumbling them all around. Is there a way I can achive this cutting off affect in html and css only? If you need my code just ask in the comments.
If your goal is to create a fixed width, you can create a wrapper div and set its width to 800px (just as an example) and it's margin to 0 and auto to Center the div if you would like.
If you'd like to make it responsive you can change width to max-width.
<html>
<head>
<style>
.wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Content here!</p>
</div>
</body>
</html>
You probably didn't need to come here for that question haha. All you need to do is set a width on the body or a div.
Cheers!
Related
I'm using the skeleton framework to build a site,and during the design I want to put a 960px grid image as a background because it's easier for me to structure all the elements.
But if I put the grid image as the body background, the image doesn't match with the 960px container and if I put the grid image as the background of the 960px container, the image doesn't shows up in the browser.
Probably this is very easy but I'm not seeing how to do it.
Any other tips about how to see the grid during the designing process are also welcomed.
Thanks.
You need to wrap your container in a div with your background. Then just put your content in the container div. Quite Simple, MANY OTHER WAYS TO DO THIS, this is my preferred way as in future designs you will notice padding and margin issue when adding stuff to container divs
.wrapper {
background-image: url ('../YOURSITE/IMAGE.JPG');
width: 960px;
background-repeat: repeat;
}
.container {
width: 960px;
}
<html>
<body>
<div class="wrapper">
<div class="container">
</div>
<!--end container-->
</div>
<!--end wrapper-->
</html>
</body>
I have a variable-height header. I want the content div below it to extend the full height of the window. But if I set the content div to height 100%, the content div goes off screen (because of the header height) and introduces a scroll bar.
I know that this can be done for fixed headers, see (http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/) but I think his method (absolute positioning with top and bottom set) won't work for a variable height header.
There is a solution using table display (http://stackoverflow.com/questions/8555820/) but I want to support IE7.
So to sum up:
Header is variable height
I want the content div to extend to the bottom of the window
I don't want a scroll bar unless it's actually required
I already know how to do this in JQuery if there isn't any pure css solution
Below is example code that shows the problem:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
#header { background-color: yellow; }
#content {
background-color: gray;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>
This might be an over-simplification, but you could fake the content area's height by setting the background-color of the body to the same colour, i.e.: gray.
That way,
Even though the content doesn't stretch to the bottom of the page, it would seem like it does.
When the content does go beyond the vertical limit, the body will stretch with it.
You can use overflow property to remove scroll bar. But your content has to fit one page.
html, body { height: 100%; overflow: hidden;}
Otherwise I think you'll need JavaScript to do that.
Whenever I come across a problem like this, I try to re-factor the page so that the <body> ends up being the full-height element with all the scrolling.
You could position:fixed the header to keep it on top, then allow the body to scroll with the content. You could do the same with a sidebar or other elements.
Have you thought about refactoring your html so that the header is within the "content" div? That way the header will still be variable height and the content div will still fill the page. The only issue would arise if you need to style the borders of your content div. Would something about your intended layout prevent this from being a good solution?
e.g.
<body>
<div id="content">
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</div>
</body>
...and if you're going that far, you could always just remove the content div altogether and place everything within the body, which is 100% height anyway :
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</body>
How do I set the width of a web page to always be exactly 1000px ? For example, like Facebook or here on StackOverflow. The site just will not resize. If the browser window is smaller than 1000px, the scroll bar is needed. And the page should be centered in the browser.
I can always put content of the page inside <div></div> tags, but I have read that it will not work for all browsers. So what is the right way to do it ?
Enclosing the content in a div that has the CSS width property set to 1000px will work across browsers.
CSS:
div.content { width: 1000px }
HTML:
<body>
<div class="content">
...
</div>
<body>
However, consider using 960 pixels instead of 1000. It is a reliable standard that works on most devices down to a 1024 pixel display width including space for scroll bars and such.
Directly set the body to display at that width:
body {
width:1000px;
margin:0 auto;
}
However, I usually use a wrap div as follows:
html
<body>
<div class="wrap"></div>
<body>
css
div.wrap {
width:1000px;
margin:0 auto;
}
I feel like this is an easy question, but for whatever reason I can't figure it out today.
I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).
If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.
i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.
I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:
example of the problem
I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.
Am I missing a requirement that's not addressed by using the body element?
I keep getting blasted by the CSS purists for this, but I recently solved this problem by using a table.
You need an outer div, set to "position:relative" and 100% height, and then you put a table inside, also 100% each way.
More explanation here: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html
You're welcome to spurn the table solution. But then I can't help you.
how about something like this?
if (wholePageDiv.style.height < myDiv.style.height) {
wholePageDiv.style.height = myDiv.style.height + 10
}
An alternative -- if that background div only needs to be a color -- is to just set the body's background-color to whatever you need. Then you don't need to worry about any javascript resizing of the background.
Holy crap ive solved it, a FULLY CENTERED DIV, enjoy.
EDIT: minor cosmetic fix
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
body {text-align: center;}
p {width: 300px;}
.greenBorder {border: 1px solid green;}
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;}
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;}
.wrapperC { #position: relative; #top: -50%;}
</style>
<script language="JavaScript" type="text/javascript">
function resize(id) {
var block = document.getElementById(id);
var htmlheight = document.body.parentNode.scrollHeight;
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;}
block.style.height = htmlheight + "px";}
</script>
</head>
<body onload="resize('wrapper')" onresize="resize('wrapper')">
<div class="wrapperA greenBorder" id="wrapper">
<div class="wrapperB greenBorder">
<div class="wrapperC greenBorder">
<p>CENTERED CONTENT</p>
</div>
</div>
</div>
</body>
</html>
I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div
div.footer {
position:absolute;
bottom:0px;
}
Does anybody knows how can I fix this? Thank you
UPDATE:
This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.
The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.
UPDATE II
My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.
What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.
Checkout CSS Sticky Footer for an excellent cross-browser compatible method.
What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.
You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.
Given this example:
<html>
<body>
<div class="header" />
<div class="content" />
<div class="footer_push" />
<div class="footer" />
</body>
</html>
If <div class="footer" /> is always 75px high, use the following CSS:
html, body { height: 100%; } /* Take all available vertical space */
/* Push the bottom of the page 75px.
This will not make scrollbars appear
if the content fits already. */
.footer_push { height: 75px; }
/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:
The html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.
The p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
The "container" div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.
All with all, here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SO question 1900813</title>
<style>
html, body {
margin: 0;
height: 100%;
}
p, div {
margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is actually "min-height" for IE6 and older. */
}
#pushfooter {
height: 50px; /* Must be the same as footer height. */
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<p>Some content</p>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.
And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.
Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.
What you're looking for is a Sticky Footer, you can find a lot of resources like this one: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
try this:
#wpr{
display: table;
height: 100%;
width: 100%;
}
.dsp-tr{
display: table-row;
}
.dsp-tc{
display: table-cell;
}
#ftr-cnr{
text-align: center;
vertical-align: middle;
}
#ftr{
background-color: red;
padding: 10px 0px;
font-size: 24px;
}
<div id="wpr">
<div class="dsp-tr">
<div class="dsp-tc">
body
</div>
</div>
<div class="dsp-tr">
<div class="dsp-tc" id="ftr-cnr">
<div id="ftr">
footer
</div>
</div>
</div>
</div>
display: table does not make it a table, a <div> is still a <div>, it just tells the browser to display it as table.
i tested it in chrome and firefox
let me know if it works for you.
We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm looks promising:
$(function(){
positionFooter();
function positionFooter(){
if($(document.body).height() < $(window).height()){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Do you have a DOCTYPE declaration in the top of your HTML?
If so, there is a good chance I have a solution for you.
I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)
No matter what I did, the 100% height didn't work! the elements just didn't stretch...
I narrowed it down to a very basic HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.
As a desperate last result guess, I removed the DOCTYPE row, resulting in this code
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
And it worked!
I'm sure there is a good explanation, but I really didn't care since it solved the problem
Update
See related question (asked by me)
Depends on what you want to do. I you want it to be always visible on the bottom of your screen, you should use
div.footer{
position: fixed;
bottom: 0;
}
Be sure to get some padding on the bottom of your body (or container, so that people can actually scroll to the bottom of the text). The main problem here is that when resizing everything it will overlap.
If you just want to have a footer that has a background-image / colour that stretches all the way till the end (for pages that are not fullpage height) you could try to use a faux column principle or even try to give your body the background colour of your footer and fix the header / content background.
Today I stumbled across this page:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
Could be helpfull
I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.
You just set your <body> with the background you want the footer to have, and then put everything besides the footer in a <div> with the properties you would normally give to the body tag.
This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)
CSS
body {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }
HTML
<body>
<div id="primary_container">
<!-- most content, can be short or long -->
</div>
<div id="footer">
<!-- if primary content + footer is less than browser height, body background color
displays below this. If it is more, you get normal scroll behavior to the end
of footer and body background color is never seen -->
</div>
</body>